jQuery ile kontrol edilen onload radyo seçeneği nasıl ayarlanır

JQuery ile yüklenen radyo seçeneğini nasıl ayarlayabilirim?

Varsayılan ayarlanıp ayarlanmadığını kontrol etmeniz ve ardından varsayılan ayarlamanız gerekir

Bunun gibi radyo düğmeleriniz olduğunu varsayalım, örneğin:

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

Ve radyo kontrol edilmezse "Erkek" yükü olan birini kontrol etmek istediniz:

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

Bir astar ne dersiniz?

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

Bu form.reset () hatasına neden olur:

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

Ama bu işe yarıyor:

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

JQuery'nin aslında radyo ve onay kutuları için kontrol durumunu ayarlamak için iki yolu vardır ve HTML biçimlendirmesinde değer niteliği kullanıp kullanmadığınıza bağlıdır:

Değer özniteliği varsa:

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

Değer özniteliği yoksa:

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

Daha fazla detay

İlk durumda, adı kullanarak tüm radyo grubunu belirtiriz ve JQuery'ye val fonksiyonunu kullanarak seçmek için radyo bulmasını söyleriz. Val işlevi 1 elemanlı diziyi alır ve eşleşen değeri olan radyoyu bulur, işaretli = true değerini ayarlar. Aynı ada sahip diğer kişilerin seçimi kaldırılacaktır. Eşleşen değeri olan bir radyo bulunmazsa, tümünün seçimi kaldırılır. Aynı isim ve değere sahip birden fazla radyo varsa, sonuncusu seçilecek ve diğerlerinin seçimi kaldırılacaktır.

Radyo için değer niteliği kullanmıyorsanız, gruptaki belirli radyoyu seçmek için benzersiz bir kimlik kullanmanız gerekir. Bu durumda, "işaretli" özelliğini ayarlamak için prop işlevini kullanmanız gerekir. Birçok kişi onay kutuları ile değer özniteliğini kullanmaz, bu nedenle # 2, onay kutuları ve radyolar için daha geçerlidir. Ayrıca, onay kutuları aynı ada sahip olduklarında grup oluşturmadığından, onay kutuları için yapabileceğinizi unutmayın $("[name=myCheckBox").prop("checked", true);.

Bu kod ile burada oynayabilirsiniz: http://jsbin.com/OSULAtu/1/edit?html,output

@Amc tarafından verilen cevabı beğendim. Ifade bir filter () çağrısı (@chaiko görünüşe göre bu fark) kullanmak için daha da yoğunlaştırılmış bulundu. Ayrıca, prop (), jQuery v1.6 + için attr () yöntemine gitmenin yoludur , konuyla ilgili resmi en iyi uygulamalar için prop () için jQuery belgelerine bakın .

@Paolo Bergantino'nun cevabındaki aynı giriş etiketlerini düşünün.

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

Güncellenmiş tek astar aşağıdakine benzer bir şey okuyabilir:

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

Bu adın benzersiz olduğunu ve gruptaki tüm radyoların aynı ada sahip olduğunu varsayabilirsiniz. Sonra jQuery desteğini aşağıdaki gibi kullanabilirsiniz:

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

Not: Geçiş dizisi önemlidir.

Koşullu sürüm:

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

Gerçekten dinamik olmasını istiyorsanız ve gelen verilere karşılık gelen radyoyu seçerseniz, bu işe yarar. Aktarılan verilerin cinsiyet değerini kullanıyor veya varsayılanı kullanıyor.

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

Yerel JS çözümü:

 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

Modelinizden bir değer geçirmek ve yüke göre gruptan değere göre yüke göre bir radyo düğmesi seçmek istiyorsanız, kullanmaktan ziyade:

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

Ve 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>

Bunlara gerek yok. Basit ve eski HTML ile istediğinizi elde edebilirsiniz. İstediğiniz radyonun varsayılan olarak şu şekilde kontrol edilmesine izin verirseniz:
<input type='radio' name='gender' checked='true' value='Male'>
Sayfa yüklendiğinde kontrol edilir.

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

Yukarıdaki yöntemlerle örnek:

<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 dilinde:

$("[name = 'radio-choice-2'][value='choice3']").prop('checked', true).checkboxradio('refresh');

Radyo giriş değerleri alınırken bu davranışa dikkat edin:

$('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() ); 

});

Yani $('input[name="myRadio"]').val()tahmin edebileceğiniz gibi, radyo girişinin kontrol değer döndürmez - bu ilk radyo düğmesinin değeri döndürür.

De esta forma Jquery obtiene solo el elemento ekose desenli

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

// Javascript veya omurga gibi bir çerçeve üzerinde yapıyorsanız, bununla çok fazla karşılaşacaksınız.

$MobileRadio = $( '#mobileUrlRadio' );

süre

$MobileRadio.checked = true;

çalışmayacak,

$MobileRadio[0].checked = true;

niyet.

seçiciniz yukarıda önerilen diğer adamlar gibi olabilir.

Bu, birden fazla radyo düğmesi için çalışır

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