Cari tahu apakah tombol radio diperiksa dengan JQuery?

584

Saya dapat mengatur tombol radio untuk dicentang dengan baik, tetapi yang ingin saya lakukan adalah mengatur semacam 'pendengar' yang aktif ketika tombol radio tertentu dicentang.

Ambil, misalnya kode berikut:

$("#element").click(function()
{ 
    $('#radio_button').attr("checked", "checked");
});

itu menambahkan atribut yang dicentang dan semuanya baik-baik saja, tetapi bagaimana cara menambahkan peringatan. Misalnya, itu muncul ketika tombol radio dicentang tanpa bantuan fungsi klik?

Keith Donegan
sumber
2
kemungkinan duplikat Periksa tombol radio tertentu dicentang
Felix Kling
1
Monitoring when a radio button is unchecked stackoverflow.com/questions/5824639/…
Adrien Be

Jawaban:

1082
$('#element').click(function() {
   if($('#radio_button').is(':checked')) { alert("it's checked"); }
});
David Hedlund
sumber
Bingo! terima kasih David. Jadi haruskah saya meminta tindakan (klik dll) untuk menunjukkan peringatan? Apakah ada cara untuk melakukan ini tanpa mengklik?
Keith Donegan
3
Ini tidak menyelesaikan "tanpa bantuan fungsi klik", bukan?
Znarkus
5
@Znarkus: OP tampak puas. apakah Anda akan berdebat bahwa Anda sendiri menggunakannya ('#radio_button').clicktanpa click?
David Hedlund
3
@ David Baris kedua seharusnya if ($('#radio_button').is(':checked'))) { alert("it's checked"); }- Anda lupa tanda $ jQuery dan kemudian perlu membungkus semuanya dalam beberapa tanda kurung lagi.
zuallauz
2
@ zua: kamu benar! bahkan memiliki kesalahan sintaks, seperti sebelumnya (tanda kurung tidak cocok). diperbaiki
David Hedlund
154

Jika Anda memiliki sekelompok tombol radio yang berbagi atribut nama yang sama dan pada saat mengirimkan atau acara yang ingin Anda periksa apakah salah satu dari tombol radio ini dicentang, Anda dapat melakukannya hanya dengan kode berikut:

$(document).ready(function(){
  $('#submit_button').click(function() {
    if (!$("input[name='name']:checked").val()) {
       alert('Nothing is checked!');
        return false;
    }
    else {
      alert('One of the radio buttons is checked!');
    }
  });
});

Sumber

jQuery API Ref

Parag
sumber
Ini tidak berhasil untuk saya. Jika saya memberi tahu ($ ("masukan [@ name = 'shipping_method']: dicentang"). Val ()); itu masih memberi saya nilai bahkan jika tombol radio tidak dipilih.
AndrewC
1
Catatan: Jika Anda memiliki beberapa formulir dengan grup tombol radio yang menggunakan nama yang sama, Anda perlu memastikan untuk memeriksa hanya formulir yang dikirimkan. Salah satu opsi untuk melakukan ini adalah menggunakan metode find pada formulir: $('#myform').submit(function(event){ if (!$(this).find("input[name='name']:checked").val()) {
Benjamin
41

Karena solusi Parag membuat kesalahan bagi saya, inilah solusi saya (menggabungkan David Hedlund dan Parag):

if (!$("input[name='name']").is(':checked')) {
   alert('Nothing is checked!');
}
else {
   alert('One of the radio buttons is checked!');
}

Ini bekerja dengan baik untuk saya!

Patrick DaVader
sumber
32

Anda harus mengikat acara klik pada kotak centang, karena acara perubahan tidak berfungsi di IE.

$('#radio_button').click(function(){
    // if ($(this).is(':checked')) alert('is checked'); 
    alert('check-checky-check was changed');
});

Sekarang saat Anda secara terprogram mengubah status, Anda harus memicu acara ini juga:

$('#radio_button').attr("checked", "checked");
$('#radio_button').click();
Znarkus
sumber
18

// Periksa kelas

if($("input:radio[class='className']").is(":checked")) {
     //write your code         
}

// Periksa melalui nama

if($("input:radio[name='Name']").is(":checked")) {
         //write your code         
}

// Periksa melalui data

if($("input:radio[data-name='value']").is(":checked")) {
         //write your code         
}
Nanhe Kumar
sumber
10

Cara lain adalah dengan menggunakan (jQuery> = 1.6) :prop

$("input[type=radio]").click(function () {
    if($(this).prop("checked")) { alert("checked!"); }
});
Saeb Amini
sumber
Memang .prop()jauh lebih cepat, dan cukup mudah untuk mengetik.
Marc.2377
10

Solusinya akan sederhana, Karena Anda hanya perlu 'pendengar' ketika tombol radio tertentu diperiksa. Lakukan :-

if($('#yourRadioButtonId').is(':checked')){ 
// Do your listener's stuff here. 
}
Shah-Kodes
sumber
6

Jika Anda tidak ingin fungsi klik gunakan fungsi perubahan Jquery

$('#radio_button :checked').live('change',function(){
alert('Something is checked.');
});

Ini harus menjadi jawaban yang Anda cari. jika Anda menggunakan versi Jquery di atas 1.9.1 coba gunakan sebagai fungsi hidup telah ditinggalkan.

iCezz
sumber
6

... Terima kasih teman-teman ... yang saya butuhkan adalah 'nilai' dari tombol radio yang diperiksa di mana setiap tombol radio di set memiliki id yang berbeda ...

 var user_cat = $("input[name='user_cat']:checked").val();

bekerja untukku ...

Bill Warren
sumber
Jawaban paling berguna
amal50
5

Bekerja dengan semua jenis Tombol Radio dan Peramban

if($('#radio_button_id')[0].checked) {
   alert("radiobutton checked")
}
else{
   alert("not checked");
}

Bekerja di sini

Thyagarajan C
sumber
3

Tombol Radio yang dihasilkan dinamis Periksa radio dapatkan nilai

$("input:radio[name=radiobuttonname:checked").val();

Pada perubahan tombol Radio dinamis

$('input[name^="radioname"]').change(function () {if (this.value == 2) { }else{}});
Dhaval Kariya
sumber
3

$ ('. radio-button-class-name'). is ('dicentang') tidak berfungsi untuk saya, tetapi kode selanjutnya bekerja dengan baik:

    if(typeof $('.radio-button-class-name:checked').val() !== 'undefined'){
     // radio button is checked
    }
Jokerius
sumber
1
Karena Anda menggunakannya dengan kelas, bukan ID, itu akan menghasilkan nodelist, bukan elemen. $('.radio-button-class-name').first().is(':checked')seharusnya bekerja.
Levi Johansen
2

coba ini

    if($('input[name="radiobutton"]:checked').length == 0) {
        alert("Radio buttons are not checked");
    }
Muhammad Aamir Ali
sumber
1

Coba ini:

alert($('#radiobutton')[0].checked)
Nandha kumar
sumber
0

jQuery masih populer, tetapi jika Anda tidak memiliki dependensi, lihat di bawah. Fungsi singkat & jelas untuk mengetahui apakah tombol radio dicek pada ES-2015:

function getValueFromRadioButton( name ){
  return [...document.getElementsByName(name)]
         .reduce( (rez, btn) => (btn.checked ? btn.value : rez), null)
}

console.log( getValueFromRadioButton('payment') );
<div>  
  <input type="radio" name="payment" value="offline">
  <input type="radio" name="payment" value="online">
  <input type="radio" name="payment" value="part" checked>
  <input type="radio" name="payment" value="free">
</div>

MaxWall
sumber
-3
$("#radio_1").prop("checked", true);

Untuk versi jQuery sebelum 1.6, gunakan:

$("#radio_1").attr('checked', 'checked');
Jayendra Manek
sumber
2
Ini menetapkan nilai checkedproperti, alih-alih menanyakannya.
Marc.2377