如何设置无线选项被选中的onload与jQuery

问题描述 投票:281回答:16

如何设置使用jQuery的onload检查收音机的选择吗?

需要检查,如果没有设置缺省值,然后设置一个默认

jquery radio-button
16个回答
539
投票

假设你有一个像这些单选按钮,例如:

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

你想检查一个与“男”的onload的值,如果没有无线电检查:

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

2
投票

并不需要这一切。通过简单的老HTML,你可以达到你想要的东西。如果你让你想用默认选中这样的广播: <input type='radio' name='gender' checked='true' value='Male'> 当页面加载时,它会过来检查。


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

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
投票

因此Jquery的仅获得检查元件

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

0
投票

//如果您在JavaScript或类似骨干框架做它,你会遇到这样的很多,你可以有这样的事情

$MobileRadio = $( '#mobileUrlRadio' );

$MobileRadio.checked = true;

不管用,

$MobileRadio[0].checked = true;

将。

您的选择可以像上述其他人推荐过。


0
投票

这适用于多个单选按钮

$('input:radio[name="Aspirant.Gender"][value='+jsonData.Gender+']').prop('checked', true);

105
投票

怎么样一个班轮?

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

50
投票

这人会引起form.reset()失败:

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

但是这一次的工作原理:

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

34
投票

jQuery有实际上两种方式来设置检查状态的无线电和复选框,它取决于你是否使用HTML标记或没有价值属性:

If they have value attribute:

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

If they don't have value attribute:

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

更多细节

在第一种情况下,我们使用的名称中指定整个无线电集团,并告诉了jQuery找出无线电使用VAL功能选择。 VAL函数需要1个元素的数组,并发现所述无线电具有匹配值,并设置其检查=真。具有相同名称的其他人将被取消。如果发现匹配的值没有无线电那么所有的都将被取消。如果有具有相同名称和值的多个无线电那么最后一个会被选中和其他人将被取消。

如果你不使用值属性无线电,那么你需要使用唯一的ID组中选择特定的无线电。在这种情况下,你需要使用道具功能设置“选中”属性。因此#2是更适用于复选框,然后收音机很多人不使用值属性以复选框。同时请注意,复选框不形成组时,他们有相同的名字,你可以做复选框$("[name=myCheckBox").prop("checked", true);

您可以在这里验证码玩:http://jsbin.com/OSULAtu/1/edit?html,output


22
投票

我喜欢通过@Amc答案。我找到了表达可以进一步缩合成不使用过滤器()调用(@chaiko显然也注意到了这一点)。另外,道具()是)去VS ATTR(jQuery的V1.6 +,看到jQuery documentation for prop()关于这一主题的官方最佳实践的方式。

考虑从@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"]);
}

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>
© www.soinside.com 2019 - 2024. All rights reserved.