如何使用jQuery设置单选选项检查onload


297

如何使用jQuery设置单选选项检查onload?

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


1
@ryenus因为我在另一个问题之前问过我,所以另一个问题不是我的重复吗?
Phill Pafford

Answers:


558

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

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

如果您未选中任何无线电,那么您想检查一个值为“ Male”的负载:

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

只是想知道Paolo,IIRC规范说,checked属性是注定要被选中=“ checked”(尽管我可能错了)。在此示例中,jQuery是否将true转换为“ checked”?只是好奇...
亚历克斯

8
我最初的示例具有“已检查”,“已检查”,这是我永远无法记住哪一个是正确的事情之一。jQuery可以用任何一种方法解决这个问题,但是我知道如果您想设置DOM元素的实际检查属性,它应该是一个布尔值,例如document.getElementById('x')。checked = true;。-所以我同意了。
Paolo Bergantino,

只是想添加此方括号在7股票浏览器的Windows Phone [名称=性别] doesn't工作
最白目

我刚刚使用FF和jQuery 1.9.1和.attr('checked',true);进行了尝试。不起作用,但是.prop('checked',true); 做。看看stackoverflow.com/questions/4618733/…(重复?)
IARI 2013年

快速入门:请勿$radios.removeAttr('checked')在道具前使用。它将混淆浏览器和发布的值。
igasparetto

109

一个班轮怎么样?

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

上面的更好,因为它支持更复杂的名称值。
J. Martin

13
这不能完全回答操作问题-它需要检查是否先检查了默认选项。同样,您现在应该使用prop()而不是attr()进行此类操作。有关说明,请参见此处的“属性与属性”部分:api.jquery.com/prop。同样也不需要额外的过滤器,您可以将两个选择器组合在一起,例如$(“ input [name = gender] [value = Male]”)。prop(“ checked”,true);
jackocnr 2014年

3
此解决方案在我第一次设置收音机时有效,但此后失败。通过使用“ prop”而不是“ attr”,它可以完美地工作。因此:$('input:radio [name =“ gender”]')。filter('[value =“ Male”]')。prop('checked',true);
安德鲁(Andrew)

2
正确-现在建议使用prop()访问属性。
安德鲁·麦康比

1
更简单:$('input:radio [name =“ gender”] [value =“ Male”]')。attr('checked',true);
雷吉斯

52

这将导致form.reset()失败:

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

但这一项有效:

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

5
我建议您使用更具可读性的trigger('click')并停止方法调用。
Barkermn01 2014年

35

JQuery实际上有两种方法来设置单选和复选框的选中状态,这取决于您是否在HTML标记中使用value属性:

如果它们具有值属性:

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

如果它们没有值属性:

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

更多细节

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

如果未将值属性用于无线电,则需要使用唯一ID在组中选择特定的无线电。在这种情况下,您需要使用prop函数来设置“选中”属性。很多人不将value属性与复选框一起使用,因此#2比单选更适用于复选框。还要注意,由于复选框具有相同的名称时不会形成组,因此可以$("[name=myCheckBox").prop("checked", true);对复选框进行设置。

您可以在此处使用以下代码:http : //jsbin.com/OSULAtu/1/edit?html,输出


22

我喜欢@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);

15

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

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

注意:传递数组很重要。

条件版本:

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

1
这很不好,因为您扫描每个元素的值都是我不推荐使用的值
Barkermn01 2014年

@MartinBarker您能通过“扫描”解释一下您的男人吗?
萨拉姆

搜索DOM,如果您仅使用属性,则强制jQuery遍历DOM中的每个元素,并检查是否与要使用的元素相同,$("*")这将匹配所有内容,因此您应使用租用类型$("input")或ID是理想的选择,因为DOM具有通过id来获取元素的本地调用
Barkermn01 2014年

@MartinBarker-我同意。通常,我在选择器前面加上表单ID或提供上下文参数。当前,扫描DOM并不是jQuery的努力,而是内部浏览器引擎,document.querySelectorAll使所有工作变得轻松。
萨拉姆2014年

要解决以上问题,请使用$("input[name=gender]")$("input[name=gender]:radio")或(对于现代浏览器)$("input[name=gender][type=radio]")
DavidBalažic16年

7

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

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

5

本机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

3

如果要从模型传递值,并希望基于值从负载组中选择一个单选按钮,则可以使用:

jQuery:

var priority = Model.Priority; //coming for razor model in this case
var allInputIds = "#slider-vertical-" + itemIndex + " fieldset input";

$(allInputIds).val([priority]); //Select at start up

和html:

<div id="@("slider-vertical-"+Model.Id)">
 <fieldset data-role="controlgroup" data-type="horizontal" data-mini="true">
    <input type="radio" name="@("radio-choice-b-"+Model.Id)" id="@("high-"+Model.Id)" value="1" checked="checked">
    <label for="@("high-"+Model.Id)" style="width:100px">@UIStrings.PriorityHighText</label>

    <input type="radio" name="@("radio-choice-b-"+Model.Id)" id="@("medium-"+Model.Id)" value="2">
    <label for="@("medium-"+Model.Id)" style="width:100px">@UIStrings.PriorityMediumText</label>

    <input type="radio" name="@("radio-choice-b-"+Model.Id)" id="@("low-"+Model.Id)" value="3">
    <label for="@("low-"+Model.Id)" style="width:100px">@UIStrings.PriorityLowText</label>
 </fieldset>
</div>

2

不需要所有这些。使用简单和旧的HTML,您可以实现所需的功能。如果让默认情况下您要检查的无线电像这样:
<input type='radio' name='gender' checked='true' value='Male'>
页面加载时,将对其进行检查。


3
是的,但是我需要它是动态的,因为引荐网站会在页面加载时传递默认值。自从我考虑了这个问题已经有一段时间了,所以我希望我能理解您的意思
Phill Pafford 2010年

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

6
请不要发布仅代码的答案。请也给一个解释。
Lee Taylor

2

这是上述方法的示例:

<div class="ui-field-contain">
<fieldset data-role="controlgroup" data-type="horizontal">    <legend>Choose a pet:</legend>
    <input type="radio" name="radio-choice-2" id="radio-choice-1" value="choice1">
    <label for="radio-choice-1">Cat</label>

    <input type="radio" name="radio-choice-2" id="radio-choice-2" value="choice2">
    <label for="radio-choice-2">Dog</label>

    <input type="radio" name="radio-choice-2" id="radio-choice-3" value="choice3">
    <label for="radio-choice-3">Hamster</label>

    <input type="radio" name="radio-choice-2" id="radio-choice-4" value="choice4">
    <label for="radio-choice-4">Lizard</label>
  </fieldset>
</div>

在javascript中:

$("[name = 'radio-choice-2'][value='choice3']").prop('checked', true).checkboxradio('refresh');

1

在获取单选输入值时,请注意以下行为:

$('input[name="myRadio"]').change(function(e) { // Select the radio input group

    // This returns the value of the checked radio button
    // which triggered the event.
    console.log( $(this).val() ); 

    // but this will return the first radio button's value,
    // regardless of checked state of the radio group.
    console.log( $('input[name="myRadio"]').val() ); 

});

因此$('input[name="myRadio"]').val(),不像您期望的那样返回单选按钮的检查值-它返回第一个单选按钮的值。


1

De Esta for Jquery obtiene独奏元素检查

$('input[name="radioInline"]:checked').val()

2
您需要描述你的答案和格式化代码
迈克尔

0

//如果您是在javascript或类似主干的框架上进行操作,则可能会遇到很多类似的情况

$MobileRadio = $( '#mobileUrlRadio' );

$MobileRadio.checked = true;

不管用,

$MobileRadio[0].checked = true;

将。

您的选择器也可以像上述其他人一样推荐。


By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.