313

jQueryでラジオオプションチェックオンロードを設定するにはどうすればよいですか？

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

4

16 に答える 16

588

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

    <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);
        }
    });
于 2009-05-15T22:12:32.137 に答える
115

ワンライナーはいかがですか？

$('input:radio[name="gender"]').filter('[value="Male"]').attr('checked', true);
于 2010-07-23T09:23:46.280 に答える
56

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

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

しかし、これは機能します：

$('input:radio[name=gender][value=Male]').click();
于 2011-08-06T04:58:14.453 に答える
22

@Amcの回答が気に入りました。filter（）呼び出しを使用しないように、式をさらに凝縮できることがわかりました（@chaikoもこれに気付いたようです）。また、prop（）は、jQuery v1.6 +のattr（）と比較する方法です。このテーマに関する公式のベストプラクティスについては、prop（）のjQueryドキュメントを参照してください。

@PaoloBergantinoの回答からの同じ入力タグを考えてみましょう。

<input type='radio' name='gender' value='Male'>
<input type='radio' name='gender' value='Female'>

更新されたワンライナーは次のようになります。

$('input:radio[name="gender"][value="Male"]').prop('checked', true);
于 2012-10-08T23:18:55.340 に答える
16

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

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

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

条件付きバージョン:

if (!$("[name=gender]:checked").length) {
    $("[name=gender]").val(["Male"]);
}
于 2013-04-24T12:31:47.577 に答える
8

ネイティブ 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
于 2016-06-15T00:57:00.133 に答える
7

本当に動的にしたい場合、受信データに対応するラジオを選択すると、これが機能します。渡されたデータの性別の値を使用しているか、デフォルトを使用しています。

if(data['gender'] == ''){
 $('input:radio[name="gender"][value="Male"]').prop('checked', true);
}else{
  $('input:radio[name="gender"][value="' + data['gender'] +'"]').prop('checked', true);
};
于 2012-11-08T19:32:25.943 に答える
2 
 $("form input:[name=gender]").filter('[value=Male]').attr('checked', true);
于 2012-12-16T13:10:57.927 に答える
2

そのすべてを必要としません。シンプルで古い HTML を使用すると、目的を達成できます。次のように、ラジオをデフォルト
<input type='radio' name='gender' checked='true' value='Male'>
でオンにすると、次のようになります。ページが読み込まれると、オンになります。

于 2010-11-12T12:59:43.560 に答える
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');
于 2015-09-14T11:46:40.483 に答える