jQueryでオンロードチェックされたラジオオプションを設定する方法


297

jQueryでオンロードチェックされたラジオオプションを設定する方法

デフォルトが設定されていないかどうかを確認してから、デフォルトを設定する必要があります


1
@ryenusは他の質問の前に私に尋ねたので、他の質問は私のものの複製ではないでしょうか?
Phill Pafford 2017年

回答:


558

たとえば、次のようなラジオボタンがあるとします。

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

Paolo、IIRCを不思議に思っていますが、仕様では、checked属性はchecked = "checked"であることを意図していると記載されています(私が間違っている可能性があります)。この例では、jQueryはtrueを「チェック済み」に変換しますか?ただ好奇心が強い...
アレックス

8
私の元の例では「チェック済み」、「チェック済み」でしたが、これはどれが正しいか思い出せないものの1つです。jQueryはどちらの方法でも計算しますが、DOM要素の実際のチェックされた属性を設定する場合は、document.getElementById( 'x')。checked = true;のように、ブール値であると想定しています。-それで私はそれで行きました。
Paolo Bergantino、

ただのWindows Phone 7の在庫ブラウザでこの角括弧記法[名=性別] doesn't作業を追加する
最白目

私はFFとjQuery 1.9.1および.attr( 'checked'、true);で試してみました。機能しませんが、.prop( 'checked'、true); します。stackoverflow.com/questions/4618733/…(重複?)を見てください
IARI

簡単な方法:$radios.removeAttr('checked')小道具の前に使用しないでください。ブラウザと投稿された値を混同します。
igasparetto 2014年

109

ワンライナーはどうですか?

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

上記は、より複雑な名前の値をサポートするため、より優れています。
J.マーティン

13
これはopsの質問に完全に答えるものではありません-デフォルトのオプションがすでに最初にチェックされているかどうかをチェックする必要があります。また、この種のものには、attr()の代わりにprop()を使用する必要があります。説明については、ここの「属性とプロパティ」のセクションを参照してください:api.jquery.com/prop。また、追加のフィルターは必要ありません。2つのセレクターを組み合わせることができます。例:$( "input [name = gender] [value = Male]")。prop( "checked"、true);
jackocnr 14

3
このソリューションは、初めて無線機を設定したときに機能しますが、その後失敗します。「attr」の代わりに「prop」を使用すると、完全に機能します。したがって:$( 'input:radio [name = "gender"]')。filter( '[value = "Male"]')。prop( 'checked'、true);
Andrew

2
正しい-プロパティにアクセスするための推奨メソッドはprop()です。
Andrew McCombe 2015

1
より単純:$( 'input:radio [name = "gender"] [value = "Male"]')。attr( 'checked'、true);
レジス2017年

52

これはform.reset()の失敗を引き起こします:

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

しかし、これはうまくいきます:

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

5
trigger( 'click')をもう少し読みやすくして、メソッド呼び出しを停止することをお勧めします。
Barkermn01 2014年

35

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


22

@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);

15

その名前は一意であり、グループ内のすべてのラジオは同じ名前を持っていると思います。次に、そのようなjQueryサポートを使用できます。

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

注:配列を渡すことが重要です。

条件付きバージョン:

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

1
これは、これまで使用されているあなたが、私はこのことをお勧めしません値のすべての要素をスキャン悪いです
Barkermn01

@MartinBarker「スキャン」であなたは何を説明できますか?
Saram、2014年

DOMを検索する場合、属性のみを使用すると、jQueryがDOM内のすべての要素を通過し、$("*")それが使用される場合と同じようにその一致をチェックするため、すべてに一致するため、少なくとも型を使用する$("input")か、IDを使用する必要があります。 DOMにはidで要素を取得するネイティブコールがあるため、理想的です
Barkermn01 '19年

@MartinBarker-同意する。通常、セレクターの前にフォームIDを付けるか、コンテキストパラメーターを指定します。現在、DOMのスキャンはjQueryの取り組みではなく、内部ブラウ​​ザーエンジンでありdocument.querySelectorAll、すべての作業を行います。
Saram、

上記の懸念事項に対処するには、$("input[name=gender]")orまたは$("input[name=gender]:radio")or(最新のブラウザーの場合)$("input[name=gender][type=radio]")
DavidBalažic2016

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>

2

そのすべてを必要としないでください。シンプルで古いHTMLを使用すると、希望どおりの結果を得ることができます。次のように、デフォルトでチェックするラジオを許可する場合:
<input type='radio' name='gender' checked='true' value='Male'>
ページがロードされると、チェックされます。


3
はい。ただし、参照サイトはページの読み込み時にデフォルトを渡すため、動的である必要があります。私がこの質問について考えてから久しぶりに、私があなたが言っていることを理解していることを願っています
Phill Pafford

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

6
コードのみの回答は投稿しないでください。説明もお願いします。
Lee Taylor、

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

De esta forma Jquery obtiene solo el elementoチェック

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

2
答えを説明し、コードをフォーマットする必要があります
Michael

0

// JavaScriptまたはバックボーンのようなフレームワークで実行している場合、これに遭遇する可能性が高く、このようなものを使用できます

$MobileRadio = $( '#mobileUrlRadio' );

ながら

$MobileRadio.checked = true;

動作しないでしょう、

$MobileRadio[0].checked = true;

意志。

あなたのセレクターは、上記の他の人にもお勧めです。


0

これは複数のラジオボタンで機能します

$('input:radio[name="Aspirant.Gender"][value='+jsonData.Gender+']').prop('checked', true);
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.