从单选按钮组中设置选定的单选按钮值。

Question

我为什么会遇到这个问题？

我有一个值：5

如何选中名称为“mygroup”的单选按钮组中值为5的单选按钮？

$("input[name=mygroup]").val(5); // doesn't work?

- dcolumbus

Answer 1

通过使用属性选择器，您可以选择具有相应值的输入元素。然后，您必须明确设置该属性，使用.attr：

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

自jQuery 1.6以来，您还可以使用布尔值与.prop方法（这应该是首选方法）：

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

请记住，您首先需要仅从一个单选按钮组中的任何单选按钮中删除"checked"属性，然后才能将该单选按钮组中的一个单选按钮添加"checked"属性/属性。

从一个单选按钮组中删除所有单选按钮的"checked"属性的代码 -

$('[name="radioSelectionName"]').removeAttr('checked');

- Felix Kling

---

@bladefist说：“.is在这里没有帮助，但我同意使用.prop。那时它还不可用 ;) 我会更新我的答案。谢谢！” - Felix Kling

如果单选按钮的值有小数，您需要将该值放在引号中。 - Robert

@Robert：是的，很可能。根据文档所述：“可以是未引用的单词或带引号的字符串。” - Felix Kling

以这种方式通过程序构建jQuery选择器不容易受到注入攻击吗？有没有一种方法可以避免这样做？ - David Given

看Jonathan的回答。jQuery文档显示.val()支持在单选框或复选框组上设置值。这个答案的方法在技术上是可行的，但是相对繁琐，并且不易于阅读/记忆。 - jinglesthula

Answer 2

检查单选框和复选框有更好的方法；您需要将值数组传递给val方法，而不是原始值。

注意：如果只传递值本身（而不是包含在数组中），则会导致“mygroup”的所有值都设置为该值。

$("input[name=mygroup]").val([5]);

以下是说明其工作方式的jQuery文档：http://api.jquery.com/val/#val-value

.val([...]) 还适用于表单元素，如 <input type="checkbox">、<input type="radio"> 以及 <select> 中的 <option>。

具有与 数组 中元素匹配值的输入和选项将被选中，而具有不匹配数组中任何元素的值的输入和选项则将取消选中。

演示这个功能的Fiddle: https://jsfiddle.net/92nekvp3/

- Jonathan Pasquier

---

已接受的答案（应该是）。从jQuery 1.0开始，请参见文档中的最后一个示例（滚动到底部）：http://api.jquery.com/val/ 在此处复制：http://jsfiddle.net/JoePC/w1f9ykso/ - JoePC

这是一种不错且一致的设置所有输入值的方式。可惜我花了6年时间才学会它。 - Jeff Lowery

花了很长时间试图弄清楚为什么我的组中所有值都被设置为传递的值而不是检查的值。 原来我只传递了这个值本身，而没有放在数组里面。 - OXiGEN

Answer 3

试一下这个：

$('input:radio[name="mygroup"][value="5"]').attr('checked',true);

JS Fiddle演示。

- David Thomas

---

@Hunter，谢谢...今天显然不是我用jQuery的好日子... =/ - David Thomas

Answer 4

当你像上面提到的那样更改属性值时，change事件不会被触发。如果出于某些原因需要触发它，可以像下面这样进行：

$('input[name=video_radio][value="' + r.data.video_radio + '"]')
       .prop('checked', true)
       .trigger('change');

- Jean-Marc Amon

Answer 5

$("input[name='mygroup'][value='5']").attr("checked", true);

- hunter

Answer 6

原生JavaScript版本：

document.querySelector('input[name="myradio"][value="5"]').checked = true;

- JukkaV

Answer 7

$("input[name='RadioTest'][value='2']").prop('checked', true);

JS fiddle演示

- karan

Answer 8

我在使用时出现了一个错误

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

工作方式是

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

问题在于处理引号（'）和双引号（"）。

- Dinushika Rathnayake

Answer 9

或者你可以直接为它编写value属性：

$(':radio[value=<yourvalue>]').attr('checked',true);

这对我有用。

- Ketan

Answer 10

var key = "Name_radio";
var val = "value_radio";
var rdo = $('*[name="' + key + '"]');
if (rdo.attr('type') == "radio") {
 $.each(rdo, function (keyT, valT){
   if ((valT.value == $.trim(val)) && ($.trim(val) != '') && ($.trim(val) != null))

   {
     $('*[name="' + key + '"][value="' + (val) + '"]').prop('checked', true);
   }
  })
}

- Amin Fathi

---

请问您能否在回答中解释一下您的代码是干什么的？至少需要一句话。并且它是如何解决问题的。谢谢。 - Alex