BinaryDevelop
  1. ホーム
  2. javascript

[解決済み] jQueryで、ラジオボタンがすべて同じ名前の場合、どのように値を取得するのでしょうか？

2022-11-03 04:52:27

質問

以下は私のコードです。 

<table>
   <tr>
      <td>Sales Promotion</td>
      <td><input type="radio" name="q12_3" value="1">1</td>
      <td><input type="radio" name="q12_3" value="2">2</td>
      <td><input type="radio" name="q12_3" value="3">3</td>
      <td><input type="radio" name="q12_3" value="4">4</td>
      <td><input type="radio" name="q12_3" value="5">5</td>
   </tr>
</table>
<button id="submit">submit</button>

以下はJSです。 

$(function(){
    $("#submit").click(function(){      
        alert($('input[name=q12_3]').val());
    });
 });

以下は JSFIDDLE ! ボタンをクリックするたびに、1が返されます。なぜですか？誰か私を助けることができますか？

どのように解決するには？

あなたのコードでは、jQueryはただ名前を持つ入力の最初のインスタンスを探します q12_3 という名前の入力の最初のインスタンスを探します。この場合、値は 1 . という名前の入力が必要です。 q12_3 というのは :checked . 

$("#submit").click(() => {
  const val = $('input[name=q12_3]:checked').val();
  alert(val);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table>
  <tr>
    <td>Sales Promotion</td>
    <td><input type="radio" name="q12_3" value="1">1</td>
    <td><input type="radio" name="q12_3" value="2">2</td>
    <td><input type="radio" name="q12_3" value="3">3</td>
    <td><input type="radio" name="q12_3" value="4">4</td>
    <td><input type="radio" name="q12_3" value="5">5</td>
  </tr>
</table>
<button id="submit">submit</button>

なお、上記のコードは ではなく を使うのと同じです。 .is(":checked") .jQueryの is() 関数は、ブール値（真または偽）と、要素（複数可）を返します。

この回答は多くの注目を集め続けているので、バニラJavaScriptのスニペットも含めておきます。 

document.querySelector("#submit").addEventListener("click", () => {
  const val = document.querySelector("input[name=q12_3]:checked").value;
  alert(val);
});

<table>
  <tr>
    <td>Sales Promotion</td>
    <td><input type="radio" name="q12_3" value="1">1</td>
    <td><input type="radio" name="q12_3" value="2">2</td>
    <td><input type="radio" name="q12_3" value="3">3</td>
    <td><input type="radio" name="q12_3" value="4">4</td>
    <td><input type="radio" name="q12_3" value="5">5</td>
  </tr>
</table>
<button id="submit">submit</button>

関連

最新

おすすめ

について
/
プライバシー・ポリシー
/
お問い合わせ
© 2022 BinaryDevelop. すべての権利は、それぞれの所有者に帰属します