在jQuery中,当它们都具有相同的名称时,如何获取单选按钮的值?

Posted

技术标签:

【中文标题】在jQuery中,当它们都具有相同的名称时,如何获取单选按钮的值?【英文标题】:In jQuery, how do I get the value of a radio button when they all have the same name? 【发布时间】:2013-08-05 07:00:13 【问题描述】:

这是我的代码:

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

【问题讨论】:

【参考方案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 sn-p。

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>

【讨论】:

【参考方案2】:

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

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

【讨论】:

我得到“未定义”值 @PavanAlapati 如果没有看到您的 html,我们也无法真正告诉您原因;理想情况下,您会发布一个新问题,其中包含您的确切 HTML sn-p 和您正在使用的代码。但是,只有在以下情况下,您才应该得到 undefined: 选择器中的名称与单选按钮的名称不匹配;没有选中任何单选按钮;或者选中的单选按钮没有赋值。【参考方案3】:

您可能想要更改选择器:

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

【讨论】:

【参考方案4】:

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

$(document).ready(function()

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

【讨论】:

【参考方案5】:

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

【讨论】:

【参考方案6】:

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

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

【讨论】:

【参考方案7】:

使用这个脚本

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

【讨论】:

jQuery 的is 函数将返回一个boolean,在这种情况下它是无用的。

以上是关于在jQuery中,当它们都具有相同的名称时,如何获取单选按钮的值?的主要内容,如果未能解决你的问题,请参考以下文章

当参数具有相同名称时如何恢复内置函数?

为啥构造函数总是与类具有相同的名称以及它们是如何被隐式调用的?

postgresql 调用具有相同名称的列

Delphi,如何在两个不同的包中安装具有相同名称的组件

解决 2 个 npm 模块具有相同名称的组件时的名称冲突

如何使用jQuery在某些特定div中选择具有相同名称的所有元素[重复]