Découvrez si le bouton radio est coché avec JQuery?

Je peux définir un bouton radio sur coché correctement, mais ce que je veux faire, c'est configurer une sorte d '«écouteur» qui s'active lorsqu'un certain bouton radio est coché.

Prenons par exemple le code suivant:

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

il ajoute un attribut vérifié et tout va bien, mais comment pourrais-je procéder pour ajouter une alerte. Par exemple, cela apparaît lorsque le bouton radio est coché sans l'aide de la fonction de clic?

$('#element').click(function() {
   if($('#radio_button').is(':checked')) { alert("it's checked"); }
});

Si vous avez un groupe de boutons radio partageant le même attribut de nom et lors de la soumission ou d'un événement que vous souhaitez vérifier si l'un de ces boutons radio a été vérifié, vous pouvez le faire simplement par le 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!');
    }
  });
});

La source

Réf API jQuery

Comme la solution de Parag m'a provoqué une erreur, voici ma solution (combinant celle de David Hedlund et celle 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!

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

// Vérifier dans la classe

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

// Vérifier 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         
}

Une autre façon est d'utiliser (jQuery> = 1.6) :prop

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

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

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

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

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

Cela devrait être la réponse que vous recherchez. si vous utilisez la version Jquery supérieure à 1.9.1, essayez d'utiliser on car la fonction live a été dépréciée.

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

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

bouton radio généré dynamiquement Vérifier la valeur de la radio

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

Bouton Modifier la radio dynamique

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

$ ('. radio-button-class-name'). is ('checked') ne fonctionnait pas pour moi, mais le code suivant fonctionnait bien:

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

essaye ça

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

Essaye ça:

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

jQuery est toujours populaire, mais si vous ne souhaitez 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>

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

Pour les versions de jQuery antérieures à 1.6, utilisez:

$("#radio_1").attr('checked', 'checked');