jQuery cocher/décocher le bouton radio onclick

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 vérifié. Pourquoi? Où est l'erreur ? Je ne suis pas un expert jQuery. Je suis sur jQuery 1.3.2

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

Answer 1

J'ai développé les suggestions précédentes. Cela fonctionne pour moi, avec plusieurs radios couplées du même nom.

 $("input[type='radio']").click(function()
{
  var previousValue = $(this).attr('previousValue');
  var name = $(this).attr('name');

  if (previousValue == 'checked')
  {
    $(this).removeAttr('checked');
    $(this).attr('previousValue', false);
  }
  else
  {
    $("input[name="+name+"]:radio").attr('previousValue', false);
    $(this).attr('previousValue', 'checked');
  }
});

Answer 2

Au lieu d'obtenir la valeur cochée, vous la définissez avec :

 var checked = $(this).attr('checked', true);

Pour bien l'obtenir :

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

Une solution de travail (avec plusieurs boutons radio ayant des valeurs différentes) :

 // select radio buttons group (same name)
var radioButtons = $("input[type='radio'][name='rr']");
// save initial ckecked states
var radioStates = {};
$.each(radioButtons, function(index, rd) {
    radioStates[rd.value] = $(rd).is(':checked');
});

// handle click event
radioButtons.click(function() {
    
    // check/unchek radio button
    var val = $(this).val();  
    $(this).prop('checked', (radioStates[val] = !radioStates[val]));    
    
    // update other buttons checked state
    $.each(radioButtons, function(index, rd) {
        if(rd.value !== val) {
            radioStates[rd.value] = false; 
        }
    });
});

PS : $().attr doit être utilisé à la place de $().prop pour jquery < 1.6

Démo : jsFiddle

Answer 3

La meilleure et la plus courte solution. Cela fonctionnera pour n'importe quel groupe de radios (avec le même nom).

 $(document).ready(function(){
    $("input:radio:checked").data("chk",true);
    $("input:radio").click(function(){
        $("input[name='"+$(this).attr("name")+"']:radio").not(this).removeData("chk");
        $(this).data("chk",!$(this).data("chk"));
        $(this).prop("checked",$(this).data("chk"));
        $(this).button('refresh'); // in case you change the radio elements dynamically
    });
});

Plus d'informations, ici .

Prendre plaisir.

Answer 4

toggleAttr() est fourni par ce très joli et petit plugin .

Exemple de code

 $('#my_radio').click(function() {
    $(this).toggleAttr('checked');
});

/**
 * toggleAttr Plugin
 */
jQuery.fn.toggleAttr = function(attr) {
    return this.each(function() {
        var $this = $(this);
        $this.attr(attr) ? $this.removeAttr(attr) : $this.attr(attr, attr);
    });
};

Encore plus amusant, démo

Vous pouvez utiliser placez votre bouton radio à l'intérieur des balises d'étiquette ou de bouton et faire de belles choses.