Answers:
假设您有这样的单选按钮,例如:
<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);
}
});
$radios.removeAttr('checked')
在道具前使用。它将混淆浏览器和发布的值。
一个班轮怎么样?
$('input:radio[name="gender"]').filter('[value="Male"]').attr('checked', true);
这将导致form.reset()失败:
$('input:radio[name=gender][value=Male]').attr('checked', true);
但这一项有效:
$('input:radio[name=gender][value=Male]').click();
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,输出
我喜欢@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);
我想您可以假设,该名称是唯一的,并且组中的所有广播都具有相同的名称。然后,您可以像这样使用jQuery支持:
$("[name=gender]").val(["Male"]);
注意:传递数组很重要。
条件版本:
if (!$("[name=gender]:checked").length) {
$("[name=gender]").val(["Male"]);
}
$("*")
这将匹配所有内容,因此您应使用租用类型$("input")
或ID是理想的选择,因为DOM具有通过id来获取元素的本地调用
document.querySelectorAll
使所有工作变得轻松。
$("input[name=gender]")
或$("input[name=gender]:radio")
或(对于现代浏览器)$("input[name=gender][type=radio]")
本机JS解决方案:
document.querySelector('input[name=gender][value=Female]').checked = true;
HTML:
<input type='radio' name='gender' value='Male'> Male
<input type='radio' name='gender' value='Female'>Female
如果要从模型传递值,并希望基于值从负载组中选择一个单选按钮,则可以使用:
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>
不需要所有这些。使用简单和旧的HTML,您可以实现所需的功能。如果让默认情况下您要检查的无线电像这样:
<input type='radio' name='gender' checked='true' value='Male'>
页面加载时,将对其进行检查。
$("form input:[name=gender]").filter('[value=Male]').attr('checked', true);
这是上述方法的示例:
<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');
在获取单选输入值时,请注意以下行为:
$('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()
,不像您期望的那样返回单选按钮的检查值-它返回第一个单选按钮的值。
这适用于多个单选按钮
$('input:radio[name="Aspirant.Gender"][value='+jsonData.Gender+']').prop('checked', true);