如何设置无线电选项检查onload与jQuery
如何设置无线电选项检查onload与jQuery？
需要检查是否没有设置默认值，然后设置默认值
假设你有这样的单选button，例如：
<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); } });
如何一个class轮？
$('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实际上有两种方法来设置广播和checkbox的检查状态，这取决于你是否在HTML标记中使用value属性：
如果他们有价值属性：
$("[name=myRadio]").val(["myValue"]);
如果他们没有价值属性：
$("#myRadio1").prop("checked", true);
更多细节
在第一种情况下，我们使用名称指定整个广播组，并告诉JQuery使用val函数查找无线电select。 val函数需要1个元素的数组，并find具有匹配值的广播，设置其checked = true。 其他同名的将被取消。 如果没有find匹配值的无线电，则全部将被取消select。 如果有多个具有相同名称和值的无线电，则最后一个将被select，而另一个将被取消select。
如果你没有使用无线电的价值属性，那么你需要使用唯一的ID来select组中的特定无线电。 在这种情况下，您需要使用prop函数来设置“checked”属性。 许多人不使用checkbox的值属性，所以＃2更适用于checkbox，然后收音机。 还要注意，当checkbox没有形成组时，他们有相同的名字，你可以做$("[name=myCheckBox").prop("checked", true); 为checkbox。
你可以在这里玩这个代码： http : //jsbin.com/OSULAtu/1/edit?html,output
我喜欢@Amc的答案。 我发现expression式可以进一步浓缩，不使用filter（）调用（@ chaiko显然也注意到了这一点）。 此外，prop（）是要去vs的attr（）为jQuery v1.6 +的方式，请参阅prop（）的jQuery文档的官方最佳实践的主题。
考虑@Paolo Bergantino的答案中的相同input标签。
<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"]); }
如果你希望它是真正的dynamic，并select对应于传入数据的收音机，这个工程。 它使用传入数据的性别值或使用默认值。
if(data['gender'] == ''){ $('input:radio[name="gender"][value="Male"]').prop('checked', true); }else{ $('input:radio[name="gender"][value="' + data['gender'] +'"]').prop('checked', true); };
不需要所有这些。 用简单和旧的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');
如果你想从你的模型传递一个值，并希望从负载上的组中select一个单选button，那么可以使用：
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>
获取无线电input值时请注意此行为：
$('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的检查值，如你所期望的那样 – 它返回第一个单选button的值。
原生JS解决scheme：
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
//如果你正在使用javascript或骨干网框架，你会遇到很多这样的事情
$MobileRadio = $( '#mobileUrlRadio' );
而
$MobileRadio.checked = true;
不pipe用，
$MobileRadio[0].checked = true;
将。
你的select可以像上面推荐的其他人一样。
