cara mengatur opsi radio yang dicek onload dengan jQuery


297

Bagaimana cara mengatur opsi radio yang dicek overload dengan jQuery?

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


1
@ryenus bukankah pertanyaan lain akan menjadi duplikat saya sejak saya menanyakan pertanyaan saya sebelumnya?
Phill Pafford

Jawaban:


558

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);
    }
});

Hanya ingin tahu Paolo, spec IIRC mengatakan bahwa atribut yang diperiksa dimaksudkan untuk diperiksa = "diperiksa" (meskipun saya mungkin salah). Apakah jQuery menerjemahkan benar ke 'diperiksa' dalam contoh ini? Hanya ingin tahu ...
alex

8
Contoh asli saya telah 'diperiksa', 'diperiksa', itu salah satu hal yang saya tidak pernah ingat yang mana yang benar. jQuery menggambarkannya dengan cara apa pun, tetapi saya tahu jika Anda ingin menetapkan atribut yang diperiksa sebenarnya dari elemen DOM itu seharusnya berupa boolean, seperti, document.getElementById ('x'). checked = true; - jadi saya pergi dengan itu.
Paolo Bergantino

hanya ingin menambahkan notasi braket persegi ini [nama = jenis kelamin] tidak berfungsi di browser saham windows phone 7.
最 白 目

Saya baru saja mencobanya dengan FF dan jQuery 1.9.1 dan .attr ('checked', true); tidak bekerja, bagaimanapun .prop ('dicentang', true); tidak. lihat stackoverflow.com/questions/4618733/… (duplikat?)
IARI

Yang cepat: JANGAN gunakan $radios.removeAttr('checked')sebelum penyangga. Ini akan membingungkan browser dan nilai yang diposting.
igasparetto

109

Bagaimana dengan satu liner?

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

Di atas lebih baik karena mendukung nilai nama yang lebih kompleks.
J. Martin

13
Ini tidak sepenuhnya menjawab pertanyaan ops - perlu memeriksa apakah opsi default sudah diperiksa terlebih dahulu. Anda juga sekarang harus menggunakan prop () bukan attr () untuk hal semacam ini. Untuk penjelasan, lihat bagian "Atribut vs. Properti" di sini: api.jquery.com/prop . Juga tidak perlu untuk filter tambahan, Anda hanya dapat menggabungkan 2 penyeleksi misalnya $ ("input [nama = jenis kelamin] [nilai = Pria]"). Prop ("dicentang", true);
jackocnr

3
Solusi ini berfungsi untuk pertama kalinya saya mengatur radio tetapi gagal setelahnya. Dengan menggunakan "prop" alih-alih "attr", ini berfungsi dengan sempurna. Jadi: $ ('input: radio [name = "gender"]'). Filter ('[value = "Male"]'). Prop ('dicentang', true);
Andrew

2
Benar - prop () sekarang metode yang disarankan untuk mengakses properti.
Andrew McCombe

1
Lebih sederhana: $ ('input: radio [name = "gender"] [value = "Male"]'). Attr ('dicentang', true);
Régis

52

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

5
saya akan merekomendasikan Anda menggunakan pemicu ('klik') sedikit lebih mudah dibaca dan menghentikan panggilan metode.
Barkermn01

35

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


22

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

15

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

1
Ini buruk Anda memindai setiap elemen untuk nilai yang saya tidak merekomendasikan ini pernah digunakan
Barkermn01

@ MartinBarker dapatkah Anda menjelaskan apa yang Anda lakukan dengan 'memindai'?
Saram

Mencari di DOM, jika Anda tidak menggunakan apa-apa selain atribut yang memaksa jQuery Anda untuk menelusuri setiap elemen di DOM dan memeriksa kecocokan itu sama seperti jika Anda menggunakannya $("*")akan cocok dengan semua hal sehingga Anda harus menggunakan tipe sewaan $("input")atau ID akan ideal karena DOM memiliki panggilan asli untuk mendapatkan elemen oleh id
Barkermn01

@ MartinBarker - Saya setuju. Biasanya saya awali pemilih dengan id formulir atau memberikan parameter konteks. Saat memindai DOM bukan upaya jQuery tetapi mesin browser internal, document.querySelectorAllmembuat semua pekerjaan.
Saram

Untuk mengatasi masalah di atas, gunakan $("input[name=gender]")atau $("input[name=gender]:radio")atau (untuk browser modern)$("input[name=gender][type=radio]")
David Balažic

7

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);
};

5

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

3

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>

2

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.


3
ya tapi saya harus dinamis karena situs pengarah akan meneruskan default pada pemuatan halaman. Sudah lama sejak saya memikirkan pertanyaan ini, jadi saya harap saya mengerti apa yang Anda katakan
Phill Pafford

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

6
Tolong jangan posting jawaban hanya kode. Tolong beri penjelasan juga.
Lee Taylor

2

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

1

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.


1

De esta forma Jquery obtiene solo el elemento diperiksa

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

2
Anda perlu menjelaskan jawaban Anda dan memformat kode Anda
Michael

0

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


0

Ini berfungsi untuk beberapa tombol radio

$('input:radio[name="Aspirant.Gender"][value='+jsonData.Gender+']').prop('checked', true);
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.