cara mengatur opsi radio yang dicek onload dengan jQuery

Bagaimana cara mengatur opsi radio yang dicek overload dengan jQuery?

Perlu memeriksa apakah tidak ada default yang ditetapkan dan kemudian menetapkan default

Katakanlah Anda memiliki tombol radio seperti ini, misalnya:

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

Dan Anda ingin memeriksa yang dengan nilai "Pria" jika tidak ada radio yang diperiksa:

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

Bagaimana dengan satu liner?

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

Yang ini akan menyebabkan kegagalan form.reset ():

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

Tapi yang ini berhasil:

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

JQuery sebenarnya memiliki dua cara untuk mengatur status diperiksa untuk radio dan kotak centang dan itu tergantung pada apakah Anda menggunakan atribut nilai dalam markup HTML atau tidak:

Jika mereka memiliki atribut nilai:

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

Jika mereka tidak memiliki atribut nilai:

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

Keterangan lebih lanjut

Dalam kasus pertama, kami menentukan seluruh grup radio menggunakan nama dan memberitahu JQuery untuk menemukan radio untuk memilih menggunakan fungsi val. Fungsi val mengambil array 1-elemen dan menemukan radio dengan nilai yang cocok, setelnya dicentang = true. Orang lain dengan nama yang sama akan dipilih. Jika tidak ada radio dengan nilai yang cocok maka semua akan dipilih. Jika ada beberapa radio dengan nama dan nilai yang sama maka yang terakhir akan dipilih dan yang lainnya akan dipilih.

Jika Anda tidak menggunakan atribut nilai untuk radio maka Anda perlu menggunakan ID unik untuk memilih radio tertentu dalam grup. Dalam hal ini, Anda perlu menggunakan fungsi penyangga untuk menyetel properti "dicentang". Banyak orang tidak menggunakan atribut nilai dengan kotak centang sehingga # 2 lebih berlaku untuk kotak centang daripada radio. Juga perhatikan bahwa karena kotak centang tidak membentuk grup ketika mereka memiliki nama yang sama, Anda dapat melakukannya $("[name=myCheckBox").prop("checked", true);untuk kotak centang.

Anda dapat bermain dengan kode ini di sini: http://jsbin.com/OSULAtu/1/edit?html,output

Saya menyukai jawabannya oleh @Amc. Saya menemukan ungkapan itu dapat diringkas lebih lanjut untuk tidak menggunakan panggilan filter () (@chaiko rupanya juga memperhatikan ini). Juga, prop () adalah cara untuk pergi vs attr () untuk jQuery v1.6 +, lihat dokumentasi jQuery untuk prop () untuk praktik terbaik resmi pada subjek.

Pertimbangkan tag input yang sama dari jawaban @Paolo Bergantino.

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

Lapisan satu yang diperbarui mungkin membaca sesuatu seperti:

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

Saya pikir Anda dapat berasumsi, nama itu unik dan semua radio dalam grup memiliki nama yang sama. Kemudian Anda dapat menggunakan dukungan jQuery seperti itu:

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

Catatan: Passing array itu penting.

Versi terkondisi:

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

Jika Anda ingin benar-benar dinamis dan memilih radio yang sesuai dengan data yang masuk, ini berfungsi. Itu menggunakan nilai gender dari data yang diteruskan atau menggunakan default.

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

Solusi JS asli:

 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

Dan jika Anda ingin memberikan nilai dari model Anda dan ingin memilih tombol radio dari grup berdasarkan nilai, daripada menggunakan:

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

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

Tidak perlu semua itu. Dengan HTML sederhana dan lama Anda dapat mencapai apa yang Anda inginkan. Jika Anda membiarkan radio yang ingin Anda periksa secara default seperti ini:
<input type='radio' name='gender' checked='true' value='Male'>
Ketika halaman dimuat, itu akan datang diperiksa.

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

Berikut ini contoh dengan metode di atas:

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

Dalam javascript:

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

Perhatikan perilaku ini saat mendapatkan nilai input radio:

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

});

Jadi $('input[name="myRadio"]').val()tidak mengembalikan nilai dicentang dari input radio, seperti yang Anda harapkan - itu mengembalikan nilai tombol radio pertama.

De esta forma Jquery obtiene solo el elemento diperiksa

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

// Jika Anda melakukannya di javascript atau kerangka kerja seperti tulang punggung, Anda akan menemukan ini banyak Anda bisa memiliki sesuatu seperti ini

$MobileRadio = $( '#mobileUrlRadio' );

sementara

$MobileRadio.checked = true;

tidak akan berfungsi,

$MobileRadio[0].checked = true;

akan.

pemilih Anda bisa seperti yang direkomendasikan orang lain di atas.

Ini berfungsi untuk beberapa tombol radio

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