JQuery cocher / décocher un bouton radio sur clic

Question

J'ai ce code pour cocher/décocher un bouton radio au clic.

Je sais que ce n'est pas bon pour l'interface utilisateur, mais j'en ai besoin.

$('#radioinstant').click(function() {     
  var checked = $(this).attr('checked', true);
  if(checked){ 
    $(this).attr('checked', false);
  }
  else{ 
    $(this).attr('checked', true);
  }
});

La fonction ci-dessus ne fonctionne pas.

Si je clique sur le bouton, rien ne change. Il reste cochée. Pourquoi ? Où est l'erreur ? Je ne suis pas un expert en jQuery. Je suis sur jQuery 1.3.2

Juste pour être clair, #radioinstant est l'ID du bouton radio.

Answer 1

Je suggérerais ceci :

$('input[type="radio"].toggle').click(function () {
    var $rb = $(this);

    if ($rb.val() === 'on') {
        $rb.val('off');
        this.checked = false;
    }
    else {
        $rb.val('on');
        this.checked = true;
    }
});

Votre HTML ressemblerait à ceci :

Answer 2

J'ai un scénario connexe mais différent. Voici ce que je fais :

Note : Code pour sélectionner/désélectionner tous les boutons radio de la classe 'containerRadio' lorsque le bouton radio principal est sélectionné.

CODE

$('#selectAllWorkLot').click (function ()
{

      var previousValue = $(this).attr('previousValue');

      if (previousValue == 'checked')
      {
        resetRadioButtonForSelectAll();

        //Désélectionner Tout
        unSelectAllContainerRadioButtons();
      }
      else
      {
        $(this).attr('previousValue', 'checked');

        //Sélectionner Tout
        selectAllContainerRadioButtons();
      }
});

function resetRadioButtonForSelectAll()
{
    $('#selectAllWorkLot').removeAttr('checked');
    $('#selectAllWorkLot').attr('previousValue', false);
    //$('#selectAllWorkLot').prop('checked', false);
}

function selectAllContainerRadioButtons()
{
    $('.containerRadio').prop('checked', true);
}

function unSelectAllContainerRadioButtons()
{
    $('.containerRadio').prop('checked', false);
}

Answer 3

J'avais un problème lié - je devais ouvrir une boîte de dialogue à partir d'un menu déroulant en fonction de la sélection du menu déroulant, je montrerai un ou deux boutons radio. Un seul bouton radio peut être activé à la fois.

• L'option 1 affichera deux boutons radio avec le premier radio sélectionné
• L'option 2 affichera le deuxième bouton radio et le sélectionnera.

Le script fonctionne parfois, parfois il injecte le 'checked' mais la case à cocher reste décochée

Je suis allé sur jQuery .prop(), il semble que jquery .prop() .attr() ait des complications avec les boutons radio lors de l'utilisation de attr ou prop. Alors, au lieu de cela, j'ai déclenché le clic sur le bouton radio en fonction de la valeur sélectionnée.

Cela résout le besoin d'utiliser attr ou prop ou d'utiliser un code long et fastidieux.

myForm = $("#myForm");

if (argument === 'multiple') {
            myForm.find('#radio1').parent('li').hide();
            myForm.find('#radio2').trigger('click');
    }
    else{
        myForm.find('#radio1').trigger('click');
         myForm.find('#radio1').parent('li').show();
    }

Je ne suis pas sûr que ce soit la meilleure pratique mais - ça marche comme un charme

Answer 4

Voici une solution simple j'espère qu'elle vous aidera. Voici un exemple simple pour améliorer la réponse.

$('[type="radio"]').click(function () {

            if ($(this).attr('checked')) {

                $(this).removeAttr('checked');
                $(this).prop('checked',false);

            } else {

                $(this).attr('checked', 'checked');

            }
        });

Démo désolé pour le retard.. :)

Answer 5

Cette dernière solution est celle qui a fonctionné pour moi. J'avais un problème avec Undefined et object object ou toujours renvoyer false puis toujours renvoyer true mais cette solution fonctionne lors de la vérification et de la décochage.

Ce code affiche les champs lorsqu'ils sont cliqués et masque les champs lorsqu'ils sont désélectionnés :

$("#new_blah").click(function(){
   if ($(this).attr('checked')) {

            $(this).removeAttr('checked');
    var radioValue = $(this).prop('checked',false);
    // alert("Vous êtes un bouton radio à l'intérieur de 1- " + radioValue);
    // masquer les champs si le bouton radio est non
    $("#new_blah1").closest("tr").hide();
    $("#new_blah2").closest("tr").hide();

    } 
    else {

    var radioValue =  $(this).attr('checked', 'checked');
    // alert("Vous êtes un bouton radio à l'intérieur de 2 - " + radioValue);
   // afficher les champs lorsque le bouton radio est réglé sur oui
    $("#new_blah1").closest("tr").show();
    $("#new_blah2").closest("tr").show();

}