jQuery设置单选按钮

Posted 2023-03-05

【中文标题】jQuery设置单选按钮

【英文标题】：jQuery set radio button

【发布时间】：2012-03-20 11:22:41

【问题描述】：

我正在尝试设置一个单选按钮。我想通过使用值或 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 被删除了，我需要设置正确的。

【问题讨论】：

how to set radio option checked onload with jQuery 的可能重复项

【参考方案1】：

您的选择器会查找 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

【讨论】：

+1 prop 与 attr。 attr 已弃用属性并且不再在 jQuery 2.0 中工作))

【参考方案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']);

【讨论】：

您好，该链接中没有建议的内容。为什么你们一直拒绝我删除链接的编辑。它不包含任何关于此事的内容。

@MenukaIshan，重点是：给予信任。该链接可在 web.archive.org 中找到，第一次编写它的人以及我从他那里得到答案的人必须得到它的信任。不要删除链接，如果您想查看原始帖子，请复制并粘贴链接（我不知道为什么它会转到旧页面而不是web.archive.org）

@Chococroc 您没有正确配置问题的 Markdown。我看到了 Web 存档版本并正确链接了它。审核后它会正确链接到该网站。

看来这应该是公认的答案，因为它是jQuery docs中提到的解决方案

【参考方案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');

【讨论】：

如果有多个具有cols 名称的收音机，那么$('input:radio[name="cols"]').attr('checked', 'checked'); 将只选择最后一个。它将在每个上运行代码，但每次设置 checked 属性时，先前设置的元素都会取消设置。这是一个演示：jsfiddle.net/jasper/n8CdM/2

@Jasper，是的，这是真的。这就是我建议使用 id 选择器的原因。

【参考方案4】：

你可以试试下面的代码：

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

这将设置为指定的单选列和值检查的属性。

【讨论】：

...the most important concept to remember about the checked attribute is that it does not correspond to the checked property. 来源：api.jquery.com/attr

【参考方案5】：

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

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

【参考方案6】：

试试这个：

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

我在使用 attr("checked", true) 时遇到了问题，所以我倾向于使用上述方法。

另外，如果您有 ID，那么您不需要其他东西来进行选择。 ID 是唯一的。

【讨论】：

prop 对于这样的事情比 attr 更好

attr 在 jQuery 1.9+ 中消失了使用 prop.

你是对的，但最终还是要看你的具体情况。如果您的代码将始终使用 jQuery 1.6+ 运行，那么 prop 是要走的路。但是，如果您的代码可能在旧版本上运行，那么解决方案就不那么简单了。例如，我维护 jQuery PickList 插件，并且我们支持 jQuery 1.4+，所以简单地使用 prop 不是一个选项。这是一张公开的票，所以如果你有任何优雅的建议，我很想听听他们；我只是还没有时间做研究。

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

【参考方案7】：

使用.filter() 也可以，并且对于id、值、名称很灵活：

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

（见于this blog）

【讨论】：

我相信这是一个同样有效的答案，但它应该使用 prop() 方法： $('input[name="cols"]').filter("[value='Site' ]").prop('检查'，真);。用户想通过“value or id”来设置。有时您可能不想为每个单选选项设置 id 值，因此按名称获取和按值过滤很有用。

【参考方案8】：

在我的例子中，单选按钮的值是从数据库中获取的，然后设置到表单中。以下代码对我有用。

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

【参考方案9】：

由于newcol是单选按钮的ID，你可以像下面这样简单地使用它。

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

【参考方案10】：

结合之前的答案：

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

【参考方案11】：

你可以简单地使用：

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

【参考方案12】：

所选答案在这种情况下有效。

但问题是关于根据 radiogroup 和动态 id 查找元素，并且答案也可以使显示的单选按钮不受影响。

这一行确实选择了所要求的内容，同时也在屏幕上显示更改。

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

【参考方案13】：

$('#a_state option[value="'+a_state+'"]').prop("selected", true);

prop() 是最佳选择，因为 attr 有时会随机运行。

【参考方案14】：

在我的情况下，我使用（单击单选时激活 Css 动画）

$('input:radio[name="cols"]').trigger ('click');