330

我的网页中有 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(){});

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

4

18 回答 18

344

应该这样做，所有这些都在文档中，其中有一个与此非常相似的示例：

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

我还应该注意，您在该片段中有多个相同的 ID。这是无效的 HTML。使用类来分组元素集，而不是 ID，因为它们应该是唯一的。

于 2009-06-12T11:15:19.877 回答
187

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

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

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

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

于 2009-06-12T15:06:43.597 回答
156 
$('input:radio[name=theme]:checked').val();
于 2013-06-04T05:42:51.337 回答
39

其他方式

$('input:radio[name=theme]').filter(":checked").val()
于 2013-11-30T05:34:57.843 回答
20

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

$valueOfTheCheckedRadio = $('[name=radioName]:checked').val();
于 2012-09-07T17:38:47.990 回答
16

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

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

谢谢阿德南

于 2013-03-06T10:45:58.813 回答
14

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

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

jsfiddle

有关当前答案的性能概述，请在此处查看

于 2014-09-30T12:34:08.117 回答
13

从 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 自述文件中的更改和特定于此更改的票证，并在附加信息部分下的:radio 选择器页面上了解原因。

于 2012-10-03T17:02:20.640 回答
9

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

alert($("input:radio:checked").val());
于 2011-06-24T18:38:04.940 回答
6

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

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

这是小提琴网址

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

于 2015-03-10T23:17:37.840 回答
4 
<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>
于 2012-07-04T06:33:46.420 回答
4

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

  $("input:radio[name=theme]").is(":checked")
于 2013-08-05T16:17:46.200 回答
3

可能是这样的？

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

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

于 2009-06-12T11:13:55.030 回答
3

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

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

干杯!

于 2015-01-14T18:01:50.227 回答
2

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

$('.radio_check:checked').val()
于 2012-06-14T16:37:13.573 回答
1

这对我有用..

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/>

查询：

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

希望能帮助到你..

于 2013-02-26T08:11:44.487 回答
0 
$('input:radio[name=theme]').bind(
  'click',
  function(){
    $(this).val();
});
于 2009-06-12T18:58:17.080 回答
0

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

您可以按如下方式创建RadioButton控件：ASP.NET

<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为您呈现以下 HTMLRadioButton

<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 的价值的唯一剩余可行方法是使用 css 类，如本RadioButton回答中提到的一个完全不相关的问题，如下所示

$('span.radios input:radio').click(function() {
    var value = $(this).val();
});
于 2015-06-19T03:29:52.383 回答