web-dev-qa-db-fra.com

Savoir si le bouton radio est coché avec JQuery?

Je peux définir un bouton radio pour cocher correctement, mais ce que je veux faire, c'est configurer une sorte d '"auditeur" qui s'active lorsqu'un certain bouton radio est coché.

Prenez, par exemple, le code suivant:

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

cela ajoute un attribut vérifié et tout va bien, mais comment pourrais-je ajouter une alerte? Par exemple, cela s’affiche lorsque le bouton radio est coché sans l’aide de la fonction de clic?

jqueryhtmlhtml5jquery-uichecked
549
Keith Donegan
$('#element').click(function() {
   if($('#radio_button').is(':checked')) { alert("it's checked"); }
});
1009
David Hedlund

Si vous avez un groupe de boutons radio partageant le même attribut de nom et que, lors de la soumission ou si vous souhaitez vérifier si l'un de ces boutons radio a été coché, vous pouvez le faire simplement à l'aide du code suivant:

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

Source

réf. API jQuery

144
Parag

Comme la solution de Parag a jeté une erreur pour moi, voici ma solution (combinant celles de David Hedlund et de Parag):

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

CA marchait bien pour moi!

39
Patrick DaVader

Vous devez lier l'événement click de la case à cocher, car l'événement change ne fonctionne pas dans IE.

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

Maintenant, lorsque vous modifiez l'état par programme, vous devez également déclencher cet événement:

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

// Check through class

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

// Vérifier par le nom

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

// Vérifier les données

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

La solution sera simple, car vous avez juste besoin d '"auditeurs" lorsqu'un certain bouton radio est coché. Fais le :-

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

Une autre méthode consiste à utiliser prop (jQuery> = 1.6) :

$("input[type=radio]").click(function () {
    if($(this).prop("checked")) { alert("checked!"); }
});
9
Saeb Amini

Si vous ne voulez pas de fonction de clic, utilisez la fonction de changement de Jquery

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

Cela devrait être la réponse que vous recherchez. si vous utilisez une version de Jquery supérieure à 1.9.1, essayez d'utiliser la fonction en tant que live était obsolète.

6
iCezz

... Merci les gars ... tout ce dont j'avais besoin était la "valeur" du bouton radio coché où chaque bouton radio de l'ensemble avait un identifiant différent ...

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

travaille pour moi...

5
Bill Warren

Travailler avec tous les types de boutons radio et de navigateurs 

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

Travailler Jsfiddle Ici

4
Thyagarajan C

$ ('. nom-classe-radio'). est ('coché') n'a pas fonctionné pour moi, mais le code suivant a bien fonctionné:

    if(typeof $('.radio-button-class-name:checked').val() !== 'undefined'){
     // radio button is checked
    }
3
Jokerius

valeur générée dynamique du bouton radio Check radio

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

Sur changement dynamique bouton radio

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

essaye ça

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

Essaye ça:

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

jQuery est toujours populaire, mais si vous souhaitez ne pas avoir de dépendances, voir ci-dessous. Fonction courte et claire pour savoir si le bouton radio est coché sur 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>
0
MaxWall