回答:
たとえば、次のようなラジオボタンがあるとします。
<input type='radio' name='gender' value='Male'>
<input type='radio' name='gender' value='Female'>
そして、ラジオがチェックされていない場合に、「男性」オンロードの値を持つものをチェックしたいと思います。
$(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には、ラジオとチェックボックスのチェック済みステータスを設定する2つの方法があり、HTMLマークアップでvalue属性を使用しているかどうかによって異なります。
$("[name=myRadio]").val(["myValue"]);
$("#myRadio1").prop("checked", true);
最初のケースでは、名前を使用してラジオグループ全体を指定し、val関数を使用してラジオを検索するようにJQueryに指示します。val関数は1要素の配列を取り、値が一致する無線を検索し、checked = trueを設定します。同じ名前の他のものは選択解除されます。一致する値を持つ無線が見つからない場合、すべての選択が解除されます。同じ名前と値の無線が複数ある場合、最後の無線が選択され、他の無線は選択解除されます。
無線の値属性を使用していない場合は、一意のIDを使用してグループ内の特定の無線を選択する必要があります。この場合、「チェック済み」プロパティを設定するには、prop関数を使用する必要があります。多くの人はチェックボックスで値属性を使用しないため、ラジオよりもチェックボックスに#2を適用する方が適しています。また、同じ名前のチェックボックスはグループを形成しない$("[name=myCheckBox").prop("checked", true);
ため、チェックボックスに対しても実行できることに注意してください。
ここでこのコードを試すことができます:http : //jsbin.com/OSULAtu/1/edit?html,output
@Amcの答えが気に入りました。filter()呼び出しを使用しないように式をさらに圧縮できることがわかりました(@chaikoもこれに気付いたようです)。また、jQuery v1.6以降では、prop()を使用して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]")
orまたは$("input[name=gender]:radio")
or(最新のブラウザーの場合)$("input[name=gender][type=radio]")
本当にダイナミックなものにして、着信データに対応する無線を選択したい場合、これは機能します。渡されたデータの性別値を使用しているか、デフォルトを使用しています。
if(data['gender'] == ''){
$('input:radio[name="gender"][value="Male"]').prop('checked', true);
}else{
$('input:radio[name="gender"][value="' + data['gender'] +'"]').prop('checked', true);
};
ネイティブ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()
ため、ラジオ入力のチェックされた値を期待どおりに返しません-最初のラジオボタンの値を返します。