2012-03-01 146 views
105

我想设置一个单选按钮。我想通过使用值或ID来设置它。jQuery设置单选按钮

这是我试过的。

$('input:radio[name=cols]'+" #"+newcol).attr('checked',true); 

newcol是单选按钮的ID。

也许有点编辑是为了。

有两套无线电箱,其中一箱有一列,另一箱有行。所以我明白了不使用id的意义。我的错。所以,我有作为一个例子:

<input type="radio" name="rows" class="listOfCols" 
    style="width: 50%; " value="Site"></input> 

<input type="radio" name="cols" class="listOfCols" 
    style="width: 50%; " value="Site"></input> 

与ID的删除,而我需要设置正确的。

+5

的可能重复[如何设置无线选项的onload检查与jQuery](http://stackoverflow.com/questions/871063/how-to-set-radio-option-checked-onload-with-jquery) – 2012-03-01 22:27:17

+0

这就是我正在寻找克里斯。谢谢 – mike628 2012-03-02 20:54:31

+0

@ mike628你应该接受其中一个答案! – 2014-01-05 20:20:33

回答

168

您的选择器查找ID为newcol(以及该变量的值)的input:radio[name=cols]元素的后代。

试试这个(因为你的ID无论如何选择):

$('#' + newcol).prop('checked',true); 

这里是一个演示:http://jsfiddle.net/jasper/n8CdM/1/

另外,在jQuery 1.6的改变属性的尤佳方法是.prop()http://api.jquery.com/prop

+5

+1对'prop' vs'attr'。 'attr'弃用于属性,不再适用于jQuery 2.0)) – gavenkoa 2013-12-20 16:09:09

+2

通过@Chococroc检查答案 – Foreever 2015-05-20 08:23:54

14

在你的选择器中,你似乎试图用一个给定的ID来获取你单选按钮的嵌套元素。如果你想检查一个单选按钮,你应该选择在选择,而不是别的东西该单选按钮:

$('input:radio[name="cols"]').attr('checked', 'checked'); 

这里假设你已经在你的标记以下单选按钮:

<input type="radio" name="cols" value="1" /> 

如果你的单选按钮有一个ID:

<input type="radio" name="cols" value="1" id="myradio" /> 

你可以直接使用id选择:

$('#myradio').attr('checked', 'checked'); 
+0

如果有多个收音机带有'cols'名字,那么'$('input:radio [name =“cols”]')。attr('checked','checked');'只会选择最后一个。它会在每个代码上运行代码,但是每次设置'checked'属性时,先前设置的元素都会被取消设置。这是一个演示:http://jsfiddle.net/jasper/n8CdM/2/ – Jasper 2012-03-01 22:31:24

+0

@贾斯珀,是的,这是真的。这就是为什么我建议使用ID选择器。 – 2012-03-01 22:32:00

2

由于newcol是单选按钮的ID,您可以简单地使用它,如下所示。

$("#"+newcol).attr('checked',true); 
7

为什么你需要'input:radio[name=cols]'。不知道你的html,但假设id是唯一的,你可以简单地做到这一点。与attr("checked", true)

$("#" + newcol).attr("checked", "checked"); 

我有问题,所以我倾向于改用以上:

$('#'+newcol).prop('checked', true); 
6

试试这个。

此外,如果您有该ID,那么您不需要其他材料进行选择。一个ID是唯一的。

+1

prop比attr好这样的东西 – RozzA 2013-08-04 13:20:04

+0

attr不在jQuery 1.9+中使用道具。 – 2013-09-18 17:11:46

+0

你是对的,但最终取决于你的具体情况。如果你的代码会一直运行在jQuery 1.6+上,那么prop就是要走的路。但是如果你的代码可能在旧版本上运行,那么解决方案就不那么简单了。例如,我维护jQuery PickList插件,并且我们支持jQuery 1.4+,因此仅使用prop不是一种选择。这是一张开放的门票,所以如果你有任何优雅的建议,我很乐意听到他们;我还没有时间做这项研究。 – 2013-09-22 15:23:37

61

我在这里找到了答案:
https://web.archive.org/web/20160421163524/http://vijayt.com/Post/Set-RadioButton-value-using-jQuery

基本上,如果你想检查一个单选按钮,你必须通过值作为数组:

$('input:radio[name=cols]').val(['Site']); 
$('input:radio[name=rows]').val(['Site']); 
+1

完美适用于我的场景。也很优雅! – kneidels 2013-09-11 21:16:39

+0

你好,链接没有建议的内容。为什么你们不断拒绝我的编辑来删除链接。它不包含任何关于此事的内容。 – 2016-11-09 03:25:52

+0

@MenukaIshan,重点是:给予学分。这个链接可以在web.archive.org中找到,那个第一次写这个链接的人以及我从中得到答案想法的人必须得到它的信任。不要删除链接,如果你想看到原来的文章,请复制并粘贴链接(我不知道为什么它会进入旧页面而不是web.archive.org) – Chococroc 2016-11-09 08:45:06

10

你可以试试下面的代码:

$("input[name=cols][value=" + value + "]").attr('checked', 'checked'); 

这将设置根据指定检查无线电列和值的属性。

+1

'。 ..最重要的概念要记住关于检查属性是它不符合检查属性。来源:http://api.jquery.com/attr/ – Jasper 2014-06-27 15:51:46

0

您可以简单地使用:

$("input[name='cols']").click(); 
0

所选择的答案能在这种情况下。

但问题是要找到基于radiogroup和动态id的元素,答案也可以保持显示的单选按钮不受影响。

此行确实选择了在屏幕上显示更改时所要求的内容。

$('input:radio[name=cols][id='+ newcol +']').click(); 
2

使用.filter()也适用,并且是柔性的,ID,值,名称:

$('input[name="cols"]').filter("[value='Site']").attr('checked', true);

(看到this blog

+0

我相信这是一个同样有效的答案,但它应该使用prop()方法:$('input [name =“cols”]')。filter(“[value ='Site']”)。prop('checked',true);.用户想要通过“值或ID”进行设置。可能有些时候你不想为每个无线电选项设置id值,所以通过名称和按值过滤非常有用。 – 2018-02-10 16:52:59