使用值设置单选组中选定的单选机

我为什么要纠结这个?

我的值是5

如何检查值为5的“ mygroup”组的单选按钮?

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

试试这个:

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

JS 小提琴演示。

属性选择器属性选择器的帮助下,您可以选择具有相应值的输入元素。然后,您必须使用 .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');
$("input[name='mygroup'][value='5']").attr("checked", true);

有一种检查单选框和复选框的更好方法; 您必须向 val 方法传递一个 数值数组,而不是一个原始值

注意: 如果您只是单独传递值(不是 在一个数组中) ,那么将导致将“ mygroup”的所有值都设置为该值。

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

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

.val([...])还可以处理 <select>内部的形式元素,如 <input type="checkbox"><input type="radio"><option>

输入和选项的值匹配 数组的一个元素将被检查或选中,而那些值不匹配数组的一个元素的值将被取消检查或取消选中

演示此工作的 Fiddle: https://jsfiddle.net/92nekvp3/

或者你可以直接把 value 属性写进去:

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

这对我有用。

当你像上面提到的那样改变属性值时,change事件不会被触发,所以如果出于某些原因需要,你可以这样触发它

$('input[name=video_radio][value="' + r.data.video_radio + '"]')
.prop('checked', true)
.trigger('change');
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);
}
})
}

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

JS 小提琴演示

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

纯 JavaScript 版本:

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

我用错了

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

工作方式是

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

问题是如何处理引号(’)和双引号(”)。

第一种方法假设已经为无线电组(输入)保存了一个引用: 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>