jQuery mengatur tombol radio

134

Saya mencoba mengatur tombol radio. Saya ingin mengaturnya dengan menggunakan nilai atau id.

Ini yang saya coba.

$('input:radio[name=cols]'+" #"+newcol).attr('checked',true);

newcol adalah id dari tombol radio.

Mungkin sedikit edit dalam rangka.

Ada dua set kotak radio satu dengan cols dan yang lainnya dengan baris. Jadi saya melihat intinya tidak menggunakan id. Salahku. Jadi saya punya contoh:

<input type="radio" name="rows" class="listOfCols" 
   style="width: 50%; " value="Site"></input>

dan 

<input type="radio" name="cols" class="listOfCols" 
   style="width: 50%; "  value="Site"></input>

dengan id dihapus, dan saya perlu mengatur yang benar.

jquery radio-button mike628
sumber
5
duplikat mungkin tentang cara mengatur opsi radio diperiksa onload dengan jQuery
Chris Pratt

Jawaban:

196

Pemilih Anda mencari turunan dari input:radio[name=cols]elemen yang memiliki id newcol(nilainya dari variabel itu).

Coba ini sebagai gantinya (karena Anda tetap memilih berdasarkan ID):

$('#' + newcol).prop('checked',true);

Berikut ini adalah demo: http://jsfiddle.net/jasper/n8CdM/1/

Juga, mulai jQuery 1.6 metode mengubah properti yang ditangguhkan adalah .prop(): http://api.jquery.com/prop

Jasper
sumber
5
1 untuk propvs attr. attrtidak digunakan lagi untuk properti dan tidak lagi berfungsi di jQuery 2.0))
gavenkoa
87

Saya menemukan jawabannya di sini:
https://web.archive.org/web/20160421163524/http://vijayt.com/Post/Set-RadioButton-value-using-jQuery

Pada dasarnya, jika Anda ingin memeriksa satu tombol radio, Anda HARUS memberikan nilai sebagai array:

$('input:radio[name=cols]').val(['Site']);
$('input:radio[name=rows]').val(['Site']);
Chococroc
sumber
Halo Tautan itu tidak memiliki konten yang Disarankan di dalamnya. Kenapa kalian terus menolak edit saya untuk menghapus tautan. Itu tidak mengandung apapun tentang masalah ini.
Menuka Ishan
@MenukaIshan, intinya adalah: Berikan kredit. Tautan tersedia di web.archive.org, dan orang yang menulisnya pertama kali dan dari siapa saya mendapatkan ide jawabannya harus menerima kreditnya. Jangan hapus tautannya, dan jika Anda ingin melihat posting asli, salin dan tempel tautannya (saya tidak tahu mengapa itu mengarah ke halaman lama alih-alih web.archive.org)
Chococroc
2
@ Chococroc Anda belum mengonfigurasi Markdown pertanyaan dengan benar. Saya melihat versi arsip Web dan menautkannya dengan benar. Setelah Ulasan Ini akan terhubung dengan benar ke situs.
Menuka Ishan
2
Sepertinya ini harus menjadi jawaban yang diterima karena ini adalah solusi yang disebutkan dalam dokumen jQuery
plong0
15

Di pemilih Anda, Anda tampaknya mencoba mengambil beberapa elemen bersarang dari tombol radio Anda dengan id yang diberikan. Jika Anda ingin memeriksa tombol radio, Anda harus memilih tombol radio ini di pemilih dan bukan yang lain:

$('input:radio[name="cols"]').attr('checked', 'checked');

Ini mengasumsikan bahwa Anda memiliki tombol radio berikut di markup Anda:

<input type="radio" name="cols" value="1" />

Jika tombol radio Anda memiliki id:

<input type="radio" name="cols" value="1" id="myradio" />

Anda bisa langsung menggunakan pemilih id:

$('#myradio').attr('checked', 'checked');
Darin Dimitrov
sumber
Jika ada beberapa radio dengan colsnama maka $('input:radio[name="cols"]').attr('checked', 'checked');hanya akan memilih yang terakhir. Ini akan menjalankan kode pada masing-masing, tetapi setiap kali Anda mengatur checkedproperti, elemen yang sebelumnya disetel tidak disetel. Berikut ini demo: jsfiddle.net/jasper/n8CdM/2
Jasper
@Jasper, ya, itu benar. Itu sebabnya saya menyarankan menggunakan pemilih id.
Darin Dimitrov
12

Anda dapat mencoba kode berikut:

$("input[name=cols][value=" + value + "]").attr('checked', 'checked');

Ini akan mengatur atribut diperiksa untuk kolom radio dan nilai yang ditentukan.

punita.gosar
sumber
1
...the most important concept to remember about the checked attribute is that it does not correspond to the checked property.Sumber: api.jquery.com/attr
Jasper
10

Mengapa Anda perlu 'input:radio[name=cols]'. Tidak tahu html Anda, tetapi dengan asumsi id unik, Anda bisa melakukan ini.

$('#'+newcol).prop('checked', true);
elclanrs
sumber
6

Coba ini:

$("#" + newcol).attr("checked", "checked");

Saya memiliki masalah dengan attr("checked", true), jadi saya cenderung menggunakan yang di atas sebagai gantinya.

Juga, jika Anda memiliki ID maka Anda tidak perlu hal-hal lain untuk seleksi. ID unik.

The Awnry Bear
sumber
1
prop lebih baik daripada attr untuk hal-hal seperti ini
RozzA
attr hilang di jQuery 1.9+ Gunakan prop.
Mike_Laird
Anda benar, tetapi pada akhirnya itu tergantung pada situasi spesifik Anda. Jika kode Anda akan selalu berjalan dengan jQuery 1.6+, maka prop adalah cara untuk melakukannya. Tetapi jika kode Anda mungkin berjalan pada versi yang lebih lama maka solusinya tidak semudah itu. Sebagai contoh, saya memelihara plugin jQuery PickList, dan kami mendukung jQuery 1.4+, jadi hanya menggunakan prop bukanlah suatu pilihan. Ini adalah tiket terbuka, jadi jika Anda memiliki saran elegan, saya ingin mendengarnya; Saya belum punya waktu untuk melakukan penelitian.
The Awnry Bear
Masalahnya adalah bahwa bahkan jika solusi Anda mungkin lebih kompatibel ke belakang itu tidak berfungsi dalam kasus ini: Pilih A, itu akan mendapatkan checked="checked"atribut baru dan browser akan menunjukkannya sebagai dicentang, kemudian pilih B dan hal yang sama akan terjadi. Sekarang ketika Anda memilih A lagi itu sudah memiliki checked="checked"atribut dan tidak ada yang akan berubah. Sebagai efek samping dari B yang masih akan dipilih, bukan A.
Kyborek
2

Karena newcolini adalah ID dari tombol radio, Anda cukup menggunakannya seperti di bawah ini.

$("#"+newcol).attr('checked',true);
Selvakumar Arumugam
sumber
2

Menggunakan .filter()juga berfungsi, dan fleksibel untuk id, nilai, nama:

$('input[name="cols"]').filter("[value='Site']").attr('checked', true);

(terlihat di blog ini )

dhc
sumber
1
Saya percaya ini adalah jawaban yang sama-sama valid, tetapi harus menggunakan metode prop (): $ ('input [name = "cols"]'). Filter ("[value = 'Situs']"). Prop ('diperiksa ', benar) ;. Pengguna ingin diatur oleh "nilai atau id". Mungkin ada saatnya Anda tidak ingin menetapkan nilai id untuk setiap opsi radio, jadi mendapatkan berdasarkan nama dan memfilter menurut nilai berguna.
Zac Imboden
2

Menggabungkan jawaban sebelumnya:

$('input[name="cols"]').filter("[value='Site']").click();
Graham Laight
sumber
0

Anda cukup menggunakan:

$("input[name='cols']").click();
Markoj
sumber
0

Jawaban yang dipilih berfungsi dalam kasus ini.

Tetapi pertanyaannya adalah tentang menemukan elemen berdasarkan radiogroup dan id dinamis, dan jawabannya juga dapat membiarkan tombol radio yang ditampilkan tidak terpengaruh.

Baris ini tidak memilih apa yang diminta sembari menunjukkan perubahan di layar juga.

$('input:radio[name=cols][id='+ newcol +']').click();
saya_
sumber