如何使用jQuery设置无线电选项onload

Question

如何使用jQuery设置无线电选项onload？

需要检查是否未设置默认值,然后设置默认值

Answer 1

假设您有这样的单选按钮,例如:

<input type='radio' name='gender' value='Male'>
<input type='radio' name='gender' value='Female'>

如果没有检查无线电,你想检查一个值为"Male"onload的那个:

$(function() {
    var $radios = $('input:radio[name=gender]');
    if($radios.is(':checked') === false) {
        $radios.filter('[value=Male]').prop('checked', true);
    }
});

Answer 2

一个班轮怎么样？

$('input:radio[name="gender"]').filter('[value="Male"]').attr('checked', true);

Answer 3

这个会导致form.reset()失败:

$('input:radio[name=gender][value=Male]').attr('checked', true);

但是这个有效:

$('input:radio[name=gender][value=Male]').click();

Answer 4

JQuery实际上有两种方法来设置radio和checkbox的检查状态,这取决于你是否在HTML标记中使用value属性:

如果他们有值属性:

$("[name=myRadio]").val(["myValue"]);

如果他们没有value属性:

$("#myRadio1").prop("checked", true);

更多细节

在第一种情况下,我们使用名称指定整个无线电组,并告诉JQuery使用val函数查找要选择的无线电.val函数采用1元素数组并找到具有匹配值的无线电,设置其checked = true.其他具有相同名称的将被取消选择.如果找不到具有匹配值的无线电,则将取消选择所有无线电.如果有多个具有相同名称和值的无线电,则将选择最后一个,并取消选择其他无线电.

如果您没有使用无线电的值属性,则需要使用唯一ID来选择组中的特定无线电.在这种情况下,您需要使用prop函数来设置"checked"属性.许多人不使用带有复选框的值属性,因此#2更适用于复选框,然后是无线电.另请注意,由于复选框在具有相同名称时不会形成组,因此您可以$("[name=myCheckBox").prop("checked", true);选中复选框.

您可以在此处使用此代码:http://jsbin.com/OSULAtu/1/edit？html,output

Answer 5

我喜欢@Amc的答案.我发现表达式可以进一步浓缩,不使用filter()调用(@chaiko显然也注意到了这一点).另外,prop()是jQuery v1.6 +与attr()相关的方法,请参阅prop()的jQuery文档,了解该主题的官方最佳实践.

考虑来自@Paolo Bergantino答案的相同输入标签.

<input type='radio' name='gender' value='Male'>
<input type='radio' name='gender' value='Female'>

更新的单行可能会读取如下内容:

$('input:radio[name="gender"][value="Male"]').prop('checked', true);

Answer 6

我想您可以假设,该名称是唯一的,并且组中的所有无线电都具有相同的名称.然后你可以像这样使用jQuery支持:

$("[name=gender]").val(["Male"]);

注意:传递数组很重要.

条件版本:

if (!$("[name=gender]:checked").length) {
    $("[name=gender]").val(["Male"]);
}

Answer 7

如果您希望它是真正动态的并选择与传入数据相对应的无线电,则可以使用.它使用传入的数据的性别值或使用默认值.

if(data['gender'] == ''){
 $('input:radio[name="gender"][value="Male"]').prop('checked', true);
}else{
  $('input:radio[name="gender"][value="' + data['gender'] +'"]').prop('checked', true);
};

Answer 8

本机JS解决方案：

 document.querySelector('input[name=gender][value=Female]').checked = true;

http://jsfiddle.net/jzQvH/75/

HTML：

<input type='radio' name='gender' value='Male'> Male
<input type='radio' name='gender' value='Female'>Female