javascript - jQueryでは、ラジオボタンがすべて同じ名前の場合、どのようにしてラジオボタンの値を取得できますか?

Question

これが私のコードです：

<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 が返されます。なぜですか? 誰でも私を助けることができますか？

Answer 1

あなたのコードでは、jQuery は name を持つ入力の最初のインスタンスを探します。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()関数は、ブール値 (true または false) を返しますが、要素ではありません。

---

この回答は多くの注目を集め続けているため、標準の 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>

Answer 2

セレクターで、チェック済みのラジオボタンが必要であることも指定する必要があります。

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

Answer 3

セレクターを変更したい場合があります：

$('input[name=q12_3]:checked').val()

Answer 4

別の方法もあります。以下のコードを試してください

$(document).ready(function(){

      $("input[name='gender']").on("click", function() {
            alert($(this).val());
        });
});

Answer 5

このスクリプトを使用します

$('input[name=q12_3]').is(":checked");