jQuery设置单选按钮

Question

我正在尝试设置单选按钮。我希望可以使用值或ID进行设置。

这是我的尝试：

$('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，我需要设置正确的id。

- mike628

---

可能是与“如何使用jQuery在页面加载时勾选单选按钮”这个问题重复了。 - Chris Pratt

Answer 1

你的选择器在寻找一个名为cols的input:radio元素的后代，该元素具有newcol的id属性（确切地说是该变量的值）。

相反，尝试使用以下选择器（因为你已经按ID选择了）：

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

以下是演示：http://jsfiddle.net/jasper/n8CdM/1/

此外，从jQuery 1.6开始，更推荐使用.prop()来改变属性： http://api.jquery.com/prop

- Jasper

---

+1 支持使用 prop 而非 attr。在 jQuery 2.0 中，attr 对属性已经不再起作用，因此已被弃用。 - gavenkoa

@FedericoJ使用数组的答案应该被采纳。 - TheStoryCoder

Answer 2

我在这里找到了答案：
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']);

- Federico J.

---

你好，那个链接里没有建议的内容。为什么你们一直拒绝我的编辑请求以删除该链接？它与此事无关。 - Menuka Ishan

@MenukaIshan，重点是：给予信用。该链接可在web.archive.org上找到，第一次撰写并从中获得答案想法的人必须得到其应有的荣誉。不要删除链接，如果您想查看原始帖子，请复制并粘贴链接（我不知道为什么它会跳转到旧页面而不是web.archive.org）。 - Federico J.

@Chococroc，你还没有正确配置问题的Markdown。我看到了Web存档版本并正确链接了它。经过审核后，它将正确地链接到该网站。 - Menuka Ishan

这似乎应该是被接受的答案，因为它是在jQuery文档中提到的解决方案。 - plong0

Answer 3

在你的选择器中，似乎试图获取具有给定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');

- Darin Dimitrov

---

如果有多个名称为cols的单选按钮，则$（'input：radio [name ="cols"]'）.attr（'checked'，'checked'）;将仅选择最后一个。它将在每个上运行代码，但是每次设置checked属性时，先前设置的元素都会被取消选择。这是演示：http://jsfiddle.net/jasper/n8CdM/2/ - Jasper

@Jasper，是的，没错。这就是为什么我建议使用id选择器的原因。 - Darin Dimitrov

Answer 4

您可以尝试以下代码：

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

这将设置单选框列的属性“checked”和指定值。

- punita.gosar

---

...关于checked属性最重要的概念是它与checked属性不对应。 - Jasper

Answer 5

为什么需要 'input:radio[name=cols]'。不知道你的html，但假设id是唯一的，你可以简单地这样做。

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

- elclanrs

Answer 6

试试这个：

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

我曾经遇到过使用attr("checked", true)时出现问题，因此我倾向于使用上述方法。

另外，如果你有ID，那么你不需要使用其他的选择器。ID是唯一的。

- The Awnry Bear

---

对于这种情况，prop比attr更好。 - RozzA

attr在jQuery 1.9+中已经被移除，请使用prop。 - Mike_Laird

你说得没错，但最终取决于你的具体情况。如果你的代码将始终在jQuery 1.6+上运行，那么prop就是正确的选择。但如果你的代码可能在旧版本上运行，那么解决方案就不那么直接了。例如，我维护jQuery PickList插件，我们支持jQuery 1.4+，所以简单地使用prop不是一个选项。这是一个公开的问题，如果你有任何优雅的建议，我很乐意听取；我只是还没有时间去研究。 - The Awnry Bear

问题在于，即使您的解决方案可能更具向后兼容性，在这种情况下它根本不起作用：选择A，它将获得新的“checked =” checked“”属性，并且浏览器将显示它为已选中，然后选择B，同样会发生。现在，当您再次选择A时，它将已经具有“checked =” checked“”属性，而且什么也不会改变。作为副作用，B仍将被选中，而不是A。 - Kyborek

Answer 7

使用.filter()同样有效，对于id、value、name都是灵活的：

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

(见于这篇博客)

- dhc

---

我认为这也是一个同样有效的答案，但它应该使用prop()方法：$('input[name="cols"]').filter("[value='Site']").prop('checked', true);。用户想要按“值或ID”设置。有时您可能不想为每个单选按钮设置ID值，因此按名称获取并按值过滤非常有用。 - Zac Imboden

Answer 8

在我的情况下，单选按钮的值是从数据库中获取并设置到表单中的。以下代码适用于我：

$("input[name=name_of_radio_button_fields][value=" + saved_value_comes_from_database + "]").prop('checked', true);

- Atequer Rahman

Answer 9

由于newcol是单选按钮的ID，您可以按如下方式简单使用它。

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

- Selvakumar Arumugam

Answer 10

将之前的答案结合起来：

$('input[name="cols"]').filter("[value='Site']").click();

- Graham Laight