如何设置无线电选项检查onload与jQuery

如何设置无线电选项检查onload与jQuery?

需要检查是否没有设置默认值，然后设置默认值

708144 次浏览
小开
最佳答案

例如，你有这样的单选按钮:

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

单程怎么样?

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

不需要这些。 使用简单而古老的HTML，您可以实现您想要的。 如果你让你想检查的收音机默认是这样的:
<input type='radio' name='gender' checked='true' value='Male'> < br > 当页面加载时，它会被选中

小开

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

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

但这条可行:

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

我喜欢@Amc的答案。我发现表达式可以进一步压缩，以不使用filter()调用(@chaiko显然也注意到了这一点)。同样，对于jQuery v1.6+， prop()是相对attr()的方法，请参阅jQuery 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);
小开

如果您希望它是真正动态的，并选择与输入数据相对应的无线电，那么这是可行的。它使用传入数据的性别值或使用默认值。

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

我想你可以假设，这个名称是唯一的，组中的所有电台都有相同的名称。然后你可以像这样使用jQuery支持:

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

注意:传递数组很重要。

的版本:

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

//如果你在javascript或像backbone这样的框架上做它，你会遇到很多这种情况 可以是这样的

$MobileRadio = $( '#mobileUrlRadio' );

而

$MobileRadio.checked = true;

不会起作用，

$MobileRadio[0].checked = true;

会的。

你的选择器也可以像上面推荐的那样。

小开

当获取无线电输入值时，请注意以下行为:

$('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()不返回单选输入的检查值，正如你可能期望的那样——它返回第一个单选按钮的值。

小开

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

如果他们有价值属性:

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

如果它们没有value属性:

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

更多的细节

在第一种情况下，我们使用名称指定整个无线电组，并告诉JQuery使用val函数找到要选择的无线电。val函数接受一个元素数组，并找到匹配值的无线电，设置其checked=true。其他同名的人将被罢免。如果没有找到匹配值的无线电，那么将取消所有的选择。如果有多个具有相同名称和值的无线电，则最后一个将被选中，其他将被取消选中。

如果您没有为radio使用value属性，那么您需要使用唯一ID来选择组中的特定radio。在这种情况下，您需要使用prop函数设置“checked”属性。许多人不使用值属性复选框，所以#2更适用于复选框，而不是无线电。还要注意的是，当复选框具有相同的名称时，它们不会形成组，因此可以对复选框执行$("[name=myCheckBox").prop("checked", true);。

你可以在这里使用代码:http://jsbin.com/OSULAtu/1/edit?html,output

小开

下面是使用上述方法的示例:

<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');
小开

如果你想从你的模型中传递一个值，并且想要根据值从加载组中选择一个单选按钮，那么使用:

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>
小开

原生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
小开

这适用于多个单选按钮

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

提交答案