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只查找名为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）而不是（a）元素。

因为这个答案一直受到很多关注，我还会包含一个vanilla 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

在您的选择器中，您还应该指定您想要检查的radiobutton：

$(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:radio[name=q12_3]:checked').val();

Answer 6

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

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

Answer 7

使用此脚本

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

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

7 个答案: