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

IT技术 javascript jquery
2021-02-21 11:31:19

这是我的代码：

<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。为什么？谁能帮我？

6个回答

在您的代码中，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()函数返回一个布尔值（真或假）而不是（一个）元素。

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

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

$(function(){
    $("#submit").click(function(){      
        alert($('input[name=q12_3]:checked').val());
    });
 });
@PavanAlapati 如果没有看到您的 HTML，我们也无法真正告诉您原因；理想情况下，您将使用确切的 HTML 代码段和您正在使用的代码发布一个新问题。但是，如果出现以下情况，您应该只得到未定义： 选择器中的名称与单选按钮的名称不匹配；没有选中任何单选按钮；或者选中的单选按钮没有分配值。
2021-04-26 11:31:19
我得到“未定义”的value
2021-05-02 11:31:19

您可能想要更改选择器：

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

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

$(document).ready(function(){

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

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

其它你可能感兴趣的问题
上一篇未定义/找到 XMLHttpRequest module 下一篇在 setTimeout() 中找到剩余的时间？