在 jQuery 中，如何通过 name 属性选择元素？答案

【问题标题】：In jQuery, how do I select an element by its name attribute?在 jQuery 中，如何通过 name 属性选择元素？
【发布时间】：2010-11-02 10:27:00
【问题描述】：

我的网页中有 3 个单选按钮，如下所示：

<label for="theme-grey">
  <input type="radio" id="theme-grey" name="theme" value="grey" />Grey</label>
<label for="theme-pink">
  <input type="radio" id="theme-pink" name="theme" value="pink" />Pink</label>
<label for="theme-green">
  <input type="radio" id="theme-green" name="theme" value="green" />Green</label>

在 jQuery 中，我想在单击这三个中的任何一个时获取所选单选按钮的值。在 jQuery 中，我们有 id (#) 和 class (.) 选择器，但是如果我想按名称查找单选按钮怎么办，如下所示？

$("<radiobutton name attribute>").click(function(){});

请告诉我如何解决这个问题。

【问题讨论】：

您不必严格指定属性“for”，只要字段包含在其对应的“标签”标签之间即可
jQuery 1.8 及更高版本改变了这一点......我在下面添加了一个答案来解释。
A1rPun's answer 是最好的：非 jQuery 单线！
使用单选按钮来维护我的 js 应用程序中的状态。在检查这个线程之前调试了一个小时。 Check this out
纯JS：document.querySelectorAll("input:radio[name=theme]").forEach(function() { this.onclick=function() { var value = this.value; }; });

标签： javascript jquery html radio-button

【解决方案1】：

可能是这样的吗？

$("input:radio[name=theme]").click(function() { 
 ...
});

当您单击任何单选按钮时，我相信它最终会被选中，因此将为选定的单选按钮调用它。

【讨论】：

@ 从 jQuery 1.3 开始无效（甚至在此之前已弃用）。 blog.jquery.com/2009/01/05/help-test-jquery-13-beta-2 "旧的 XPath 样式属性选择器：[@attr=value]。这些已经被弃用了很长一段时间 - 我们终于将它们删除了。要修复它，只需删除 @！"

【解决方案2】：

这个应该可以了，这一切都在documentation里面，和这个有一个非常相似的例子：

$("input[type='radio'][name='theme']").click(function() {
    var value = $(this).val();
});

我还应该注意到，您在该 sn-p 中有多个相同的 ID。这是无效的 HTML。使用类对一组元素进行分组，而不是 ID，因为它们应该是唯一的。

【讨论】：

@gargantaun - 如果你点击一个单选按钮，它会发生什么？
好点。虽然它仍然不是“如何在 jQuery 中使用其名称获取选定的单选按钮值？”。它是“使用 jQuery 单击它时如何获取选定的单选按钮值？”。一个很小的区别，但让我有点困惑。
根据问题，这个答案是正确的。在全球视野中，我们寻求克莱顿的答案。
从 jQuery 1.8 开始，使用 [type='radio'] 而不是 :radio，这样 jQuery 可以利用原生 DOM querySelectorAll() 方法提供的性能提升。
@PaoloBergantino 的答案是 100% 正确的，因为它在单击所需的单选按钮后返回值。@Clayton Rabenda 的答案没有给出这个。

【解决方案3】：

要确定选中哪个单选按钮，请尝试以下操作：

$('input:radio[name=theme]').click(function() {
  var val = $('input:radio[name=theme]:checked').val();
});

将为组中的所有单选按钮捕获该事件，并且所选按钮的值将放置在 val 中。

更新：发布后，我认为 Paolo 上面的答案更好，因为它使用了更少的 DOM 遍历。我让这个答案站得住脚，因为它展示了如何以跨浏览器兼容的方式获取所选元素。

【讨论】：

了解我阅读问题的方式，这就是我需要的答案。 :checked 是我在等式中缺少的。谢谢。
从 jQuery 1.8 开始，使用 [type='radio'] 而不是 :radio，这样 jQuery 可以利用原生 DOM querySelectorAll() 方法提供的性能提升。
我错误地在冒号之后和“检查”之前给了一个空格。所以请确保没有空格。
对于那些不想从点击事件处理程序中获取值的人来说，这是一个有用的答案。否则，您必须使用:checked 来查找检查了哪个按钮，例如，使用this 关键字未映射到单击的按钮的表单提交事件处理程序。

【解决方案4】：

$('input:radio[name=theme]').bind(
  'click',
  function(){
    $(this).val();
});

【讨论】：

【解决方案5】：

如果您想知道单击事件之前默认选中单选按钮的值，请尝试以下操作：

alert($("input:radio:checked").val());

【讨论】：

【解决方案6】：

也可以使用 CSS 类来定义单选按钮的范围，然后使用下面的来确定值

$('.radio_check:checked').val()

【讨论】：

【解决方案7】：

<input type="radio" name="ans3" value="help"> 
<input type="radio" name="ans3" value="help1">
<input type="radio" name="ans3" value="help2">

<input type="radio" name="ans2" value="test"> 
<input type="radio" name="ans2" value="test1">
<input type="radio" name="ans2" value="test2">

<script type="text/javascript">
  var ans3 = jq("input[name='ans3']:checked").val()
  var ans2 = jq("input[name='ans2']:checked").val()
</script>

【讨论】：

【解决方案8】：

这对我很有用。例如，您有两个具有相同“名称”的单选按钮，而您只想获取选中的单选按钮的值。你可以试试这个。

$valueOfTheCheckedRadio = $('[name=radioName]:checked').val();

【讨论】：

这个答案比目前接受的 230+ 投票的答案更好的原因是，这个答案还考虑了用户通过键盘与单选按钮交互的时间。

【解决方案9】：

从 jQuery 的 1.7.2 升级到 1.8.2 后，我在研究错误时发现了这个问题。我正在添加我的答案，因为 jQuery 1.8 及更高版本发生了变化，这改变了现在回答这个问题的方式。

With jQuery 1.8 they have deprecated 伪选择器，如 :radio、:checkbox、:text。

现在要执行上述操作，只需将 :radio 替换为 [type=radio]。

所以您的答案现在适用于所有版本的 jQuery 1.8 及更高版本：

$("input[type=radio][name=theme]").click(function() { 
    var value = $(this).val(); 
});

您可以阅读change on the 1.8 readme 和the ticket specific for this change 的相关信息，并在附加信息部分下的:radio selector page 上了解原因。

【讨论】：

:checked 未被弃用。所以你可以使用$("input[type='radio'][name='theme']:checked")

【解决方案10】：

这对我有用..

HTML：

<input type="radio" class="radioClass" name="radioName" value="1" />Test<br/>
<input type="radio" class="radioClass" name="radioName" value="2" />Practice<br/>
<input type="radio" class="radioClass" name="radioName" value="3" />Both<br/>

Jquery：

$(".radioClass").each(function() { if($(this).is(':checked')) 警报($(this).val()); });

希望对你有帮助..

【讨论】：

【解决方案11】：

以下代码用于通过名称获取选中的单选按钮值

jQuery("input:radio[name=theme]:checked").val();

谢谢阿德南

【讨论】：

hmm .. 我没有在您上次回复中修复您的代码格式吗？请您自己处理 :-)

【解决方案12】：

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

【讨论】：

我继续使用$("input[name=theme]:checked").val();（将:radio 部分去掉，它似乎在IE、FF、Safari 和Chrome 中运行良好。我必须使用jQ v 1.3...当然，这意味着只有一个名为“主题”的元素
这是国际海事组织的最佳答案，它说“让我知道这个名字的 CHECKED 收音机的价值”。无需事件等。

【解决方案13】：

如果你想要一个真/假值，使用这个：

  $("input:radio[name=theme]").is(":checked")

【讨论】：

【解决方案14】：

另一种方式

$('input:radio[name=theme]').filter(":checked").val()

【讨论】：

如果你有兴趣抓住价值+1，这个很有用
这很可靠，因为您可以使用变量来保留单选按钮，例如$themeRadios = $('input:radio[name=theme']) 设置任何事件处理程序，然后使用过滤器获取值，例如$themeRadios.filter(":checked").val().
我喜欢这个解决方案。

【解决方案15】：

对于那些不想包含一个库来做一些非常简单的事情的人：

document.querySelector('[name="theme"]:checked').value;

jsfiddle

有关当前答案的性能概览check here

【讨论】：

感谢您的回答。因为我无法以任何形式获得公认的答案。

【解决方案16】：

如果你在同一个页面上有不止一组单选按钮，你也可以试试这个来获取单选按钮的值：

$("input:radio[type=radio]").click(function() {
    var value = $(this).val();
    alert(value);
});

干杯！

【讨论】：

【解决方案17】：

如果页面上有多个单选组，可以使用过滤功能，如下所示

$('input[type=radio]').change(function(){
    var value = $(this).filter(':checked' ).val();
    alert(value);
});

这里是小提琴网址

http://jsfiddle.net/h6ye7/67/

【讨论】：

【解决方案18】：

您可能会注意到使用类选择器获取 ASP.NET RadioButton 控件的值始终为空，这就是原因。

您在ASP.NET 中创建RadioButton 控件，如下所示：

<asp:RadioButton runat="server" ID="rbSingle" GroupName="Type" CssClass="radios" Text="Single" />
<asp:RadioButton runat="server" ID="rbDouble" GroupName="Type" CssClass="radios" Text="Double" />
<asp:RadioButton runat="server" ID="rbTriple" GroupName="Type" CssClass="radios" Text="Triple" />

ASP.NET 为您的RadioButton 呈现以下 HTML

<span class="radios"><input id="Content_rbSingle" type="radio" name="ctl00$Content$Type" value="rbSingle" /><label for="Content_rbSingle">Single</label></span>
<span class="radios"><input id="Content_rbDouble" type="radio" name="ctl00$Content$Type" value="rbDouble" /><label for="Content_rbDouble">Double</label></span>
<span class="radios"><input id="Content_rbTriple" type="radio" name="ctl00$Content$Type" value="rbTriple" /><label for="Content_rbTriple">Triple</label></span>

对于ASP.NET，我们不想使用RadioButton 控件名称或ID，因为它们可以出于任何原因在用户手中进行更改（更改容器名称、表单名称、用户控件名称……）可以在上面的代码中看到。

使用 jQuery 获取 RadioButton 值的唯一剩余可行方法是使用 this 中提到的 css 类回答一个完全不相关的问题，如下所示

$('span.radios input:radio').click(function() {
    var value = $(this).val();
});

【讨论】：