使用值设置从收音机组中选择的收音机

Question

我为什么要为此苦苦挣扎？

我有一个值：5

如何查看组“mygroup”的单选按钮，值为 5？

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

Answer 1

在attribute selector 的帮助下，您可以选择具有相应值的输入元素。然后你必须明确设置属性，使用.attr：

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

从 jQuery 1.6 开始，您还可以使用带有布尔值的 .prop 方法（这应该是首选方法）：

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

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

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

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

Answer 2

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

注意：如果您只是单独传递值（而不是在数组中），这将导致“mygroup”的所有值都设置为该值.

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

这里是解释其工作原理的 jQuery 文档：http://api.jquery.com/val/#val-value

并且.val([...]) 也适用于<select> 内的<input type="checkbox">、<input type="radio"> 和<option>s 等表单元素。

将检查或选择具有与 数组 的元素之一匹配的值的输入和选项，而具有与数组的元素之一不匹配的值的输入和选项将被取消选中或取消选择

小提琴演示此工作：https://jsfiddle.net/92nekvp3/

Answer 3

试试这个：

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

JS Fiddle demo.

Answer 4

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

Answer 5

当您像上面提到的那样更改属性值时，change 事件不会被触发，因此如果由于某些原因需要，您可以像这样触发它

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

Answer 6

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

JS fiddle Demo

Answer 7

纯 JavaScript 版本：

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

Answer 8

或者你可以只写 value 属性给它：

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

这对我有用。

Answer 9

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);
   }
  })
}

Answer 10

使用时出错

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

工作方式是

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

问题是处理引号（'）和双引号（“）。

Answer 11

第一种方法假设无线电组（输入）已经保存了一个参考：group，并且希望在组中选择一个，value

const group = document.querySelectorAll('input[name="contact"]');

function selectGroupByValue(group, value){
  const input = [...group].find(el => el.value === value);
  if(input) input.checked = true;
}

selectGroupByValue(document.querySelectorAll('input[name="contact"]'), 'phone');

<input type="radio" name="contact" value="email">
<input type="radio" name="contact" value="phone">
<input type="radio" name="contact" value="mail">

这可以更进一步，通过name创建一个更强大的函数，可以改变任何组的值：

function selectGroupByValue(name, value){
  const group = document.querySelectorAll(`input[name="${name}"]`);
  const input = [...group].find(el => el.value === value);
  if(input) input.checked = true;
}

selectGroupByValue('contact', 'phone');

<input type="radio" name="contact" value="email">
<input type="radio" name="contact" value="phone">
<input type="radio" name="contact" value="mail">

下面的示例完全不同，因为它没有对无线电组的缓存引用，但每次都会进行查找：

const selectedValue = 'phone';
const input = document.querySelector(`input[name="contact"][value="${selectedValue}"`);
if(input) input.checked = true;

<input type="radio" name="contact" value="email">
<input type="radio" name="contact" value="phone">
<input type="radio" name="contact" value="mail">

如果组在 <form> 元素内： （故意没有破坏 for 迭代器）

for (const [index, input] of document.forms[0].contact.entries())
  if(input.value === `phone`)
    input.checked = true

<form>
  <input type="radio" name="contact" value="email">
  <input type="radio" name="contact" value="phone">
  <input type="radio" name="contact" value="mail">
</form>

Answer 12

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