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

https://stackoverflow.com/questions/871063

22-08-2019
|

質問

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

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

解決

、たとえば、あなたがこのようなラジオボタンを持っていたと言います

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

そして、あなたにはラジオがチェックされていない場合は、「男性」のonloadの値に1をチェックしたい：

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

他のヒント

どのように1つのライナーはどうですか？

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

この1が原因となりますform.reset（）失敗します：

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

しかし、この1つが機能します：

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

実際、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,出力

私は@Amcによって答えを言っています。私は式は、フィルタ（）の呼び出し（@chaikoは明らかにも、このことに気づい）を使用しないように、さらに凝縮することができました。また、小道具は（）のために jQueryのドキュメントを参照してください、jQueryのバージョン1.6の+のためのattr対移動するための方法（）です主題に関する公式のベストプラクティスのための（）に支えています。

@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"]);
}

あなたはそれが本当に動的なものと入ってくるデータに対応するラジオを選択したい場合、これは動作します。これは、渡されたデータの性別値を使用するか、デフォルトを使用しています。

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;

http://jsfiddle.net/jzQvH/75/

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()は、ラジオ入力の確認値を返さないように - 。それが最初のラジオボタンの値を返します。

Jquery のソロ要素を確認するためのデスタ

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

//あなたはjavascriptや背骨のようなフレームワーク上でそれをやっている場合は、この多く発生しますあなたはこのような何かを持っている可能性があります。

$MobileRadio = $( '#mobileUrlRadio' );

中

$MobileRadio.checked = true;

は動作しません、

$MobileRadio[0].checked = true;

意志ます。

あなたのセレクタがあまりにもお勧めします上記の他のみんなのようにすることができます。

これは、複数のラジオボタンのために働く。

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

ライセンス： CC-BY-SA と帰属

所属していません StackOverflow