web-dev-qa-db-ja.com

jQueryを使ってオンロード時のラジオオプションを設定する方法

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

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

jqueryradio-button
281
Phill Pafford

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

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

無線がチェックされていない場合は、値が "Male" onloadであるものをチェックしたいと思いました。

$(function() {
    var $radios = $('input:radio[name=gender]');
    if($radios.is(':checked') === false) {
        $radios.filter('[value=Male]').prop('checked', true);
    }
});
523
Paolo Bergantino

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

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

これによりform.reset（）が失敗します。

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

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

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

JQueryには実際にラジオとチェックボックスのチェック状態を設定する2つの方法があり、それはHTMLマークアップでvalue属性を使用しているかどうかによって異なります。

それらがvalue属性を持つ場合：

$("[name=myRadio]").val(["myValue"]);

それらがvalue属性を持たない場合：

$("#myRadio1").prop("checked", true);

もっと詳しく

最初のケースでは、nameを使用してラジオグループ全体を指定し、val関数を使用して選択するラジオを見つけるようにJQueryに指示します。 val関数は1要素の配列を取り、値が一致するラジオを見つけ、checked = trueに設定します。同じ名前の人は選択を解除されます。一致する値を持つ無線が見つからない場合は、すべて選択解除されます。同じ名前と値を持つ無線が複数ある場合は、最後の無線が選択され、他の無線は選択解除されます。

無線にvalue属性を使用していない場合は、グループ内の特定の無線を選択するために一意のIDを使用する必要があります。この場合、prop関数を使用して「checked」プロパティを設定する必要があります。チェックボックスにvalue属性を使用しない人が多いため、ラジオよりもチェックボックスに＃2が適しています。また、同じ名前のチェックボックスはグループを形成しないため、チェックボックスに対して$("[name=myCheckBox").prop("checked", true);を実行できます。

あなたはここでこのコードで遊ぶことができます： http://jsbin.com/OSULAtu/1/edit？html、output

29
Shital Shah

私は@ Amcによる答えが好きでした。私は式がfilter（）呼び出しを使用しないようにさらに圧縮できることを発見しました（@chaikoは明らかにこれに気付いた）。また、prop（）はjQuery v1.6以降でvs 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);
21
clayzermk1

私はあなたが推測することができると思います、その名前はユニークであり、グループ内のすべてのラジオは同じ名前を持っています。それならあなたはそのようなjQueryサポートを使うことができます：

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

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

コンディショニングバージョン：

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

本当に動的にして、着信データに対応する無線を選択したい場合は、これでうまくいきます。渡されたデータの性別値を使用するか、デフォルトを使用します。

if(data['gender'] == ''){
 $('input:radio[name="gender"][value="Male"]').prop('checked', true);
}else{
  $('input:radio[name="gender"][value="' + data['gender'] +'"]').prop('checked', true);
};
7
WildSpidee

ネイティブ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
4
Razan Paul

モデルから値を渡し、値に基づいてロード時にグループからラジオボタンを選択する場合は、次のようにします。

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>
3
Iftikhar
 $("form input:[name=gender]").filter('[value=Male]').attr('checked', true);
2
rookie to jquery

これが上記のメソッドの例です。

<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');
2
karma

そんなことは必要ありません。シンプルで古いHTMLを使えば、あなたが望むものを達成することができます。デフォルトでチェックしたいラジオを次のようにしておくと：
<input type='radio' name='gender' checked='true' value='Male'>
ページがロードされると、チェックされます。

2
Carlos Torres

ラジオ入力値を取得するときにこの動作に注意してください。 

$('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
Bradley Flood

デエスタフォーマットJquery obtiene solo el elementoチェック /

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

これは複数のラジオボタンに有効です。

$('input:radio[name="Aspirant.Gender"][value='+jsonData.Gender+']').prop('checked', true);
0
Hari Lakkakula

// Javascriptやバックボーンのようなフレームワークでそれをやっているのであれば、このようなことがたくさん起こるでしょう。

$MobileRadio = $( '#mobileUrlRadio' );

しながら

$MobileRadio.checked = true;

動作しないでしょう、

$MobileRadio[0].checked = true;

意志。

あなたのセレクタは上記の他の人たちも推奨するようにすることができます。

0
JrBriones