在 jQuery 中，当单选按钮的名称都相同时，如何获取它们的值？

In jQuery, how do I get the value of a radio button when they all have the same name?

提问by SPG

Here is my code:

这是我的代码：

<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>

Here is JS:

这是JS：

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

Here is JSFIDDLE! Every time I click button it returns 1. Why? Can anyone help me?

这是JSFIDDLE！每次我点击按钮它返回 1。为什么？谁能帮我？

回答by Bram Vanroy

In your code, jQuery just looks for the first instance of an input with name q12_3, which in this case has a value of 1. You want an input with name q12_3that is :checked.

在您的代码中，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>

Note that the above code is notthe same as using .is(":checked"). jQuery's is()function returns a boolean (true or false) and not (an) element(s).

请注意，上面的代码是不一样的使用.is(":checked")。jQuery 的is()函数返回一个布尔值（真或假）而不是（一个）元素。

---

---

Because this answer keeps getting a lot of attention, I'll also include a vanilla JavaScript snippet.

因为这个答案一直受到很多关注，所以我还将包含一个普通的 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>

回答by Dennis

in your selector, you should also specify that you want the checked radiobutton:

在您的选择器中，您还应该指定您想要选中的单选按钮：

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

回答by fantactuka

You might want to change selector:

您可能想要更改选择器：

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

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

回答by Ankush Khandekar

There is another way also. Try below code

还有另一种方式。试试下面的代码

$(document).ready(function(){

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

回答by Iyes boy

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

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

回答by Code Spy

DEMO: https://jsfiddle.net/ipsjolly/xygr065w/

演示：https: //jsfiddle.net/ipsjolly/xygr065w/

$(function(){
    $("#submit").click(function(){      
        alert($('input:radio:checked').val());
    });
 });

回答by Sohil Desai

use this script

使用这个脚本

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