在jQuery中，如何通过其名称属性选择元素?

我有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(#)和类(.)选择器，但如果我想找到一个单选按钮的名字，如下所示?

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

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

563828 次浏览
小开

也许是这样的?

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

当你点击任意单选按钮时，我相信它最终会被选中，所以这个会被调用用于选中的单选按钮。

小开
最佳答案

应该这样做，所有这些都在文档中，它有一个非常类似的例子:

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

我还应该注意到，在该代码片段中有多个相同的id。这是无效的HTML。使用类来对一组元素进行分组，而不是id，因为它们应该是唯一的。

小开

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

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

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

更新:在发帖后，我认为Paolo上面的答案更好，因为它少使用了一次DOM遍历。我保留这个答案，因为它展示了如何以跨浏览器兼容的方式获取所选元素。

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

如果你想知道点击事件之前默认选中单选按钮的值，试试这个:

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

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

$('.radio_check:checked').val()
小开 
<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>
小开

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

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

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

对于jQuery 1.8，他们已经弃用了伪选择器，如:radio，:checkbox，:text。

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

所以你的答案现在变成了所有版本的jQuery 1.8及以上:

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

你可以在附加信息部分的1.8自述文件上的更改和这张票是针对这一变化的中阅读有关1.8自述文件上的更改和这张票是针对这一变化的的内容，并了解为什么要使用:无线电选择器页面。

小开

这对我很有效。

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'))
alert($(this).val());
});

希望能有所帮助。

小开

下面的代码用于按名称获取所选单选按钮值

jQuery("input:radio[name=theme]:checked").val();
< p >谢谢 Adnan < / p >
小开 
$('input:radio[name=theme]:checked').val();
小开

如果你想要一个true/false值，使用这个:

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

另一种方式

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

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

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

jsfiddle

对于当前答案< >强检查这里< / >强的性能概述

小开

如果你在同一页面上有多组单选按钮，你也可以试试这个来获得单选按钮的值:

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

干杯!

小开

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

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

这是小提琴url

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

小开

你可能会注意到使用类选择器获取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值的唯一可行方法是使用css类，如这中提到的，下面是一个完全无关的问题

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

提交答案