我有3个单选按钮在我的网页,如下所示:

<标签=“主题灰色”> <输入类型=“无线电” id=“主题-灰色” 名称=“主题” 值=“灰色” />灰色</label> <标签=“主题粉红色”> <输入类型=“收音机” id=“主题-粉红色” 名称=“主题” 值=“粉红色” />粉红色</label> <标签=“主题绿色”> <输入类型=“无线电” id=“主题-绿色” 名称=“主题” 值=“绿色” />绿色</label>

在jQuery中,我想在单击这三个按钮中的任何一个时获得所选单选按钮的值。在jQuery中,我们有id(#)和类(.)选择器,但如果我想找到一个单选按钮的名字,如下所示?

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

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


当前回答

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

其他回答

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

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

干杯!

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

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

您可能注意到使用类选择器来获取ASP的值。NET RadioButton控件总是空的,这是原因。

在ASP中创建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渲染以下HTML为您的RadioButton

<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();
});

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

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

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

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

这应该可以做到,所有这些都在文档中,其中有一个非常类似的例子:

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

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