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

J'ai développé davantage les suggestions précédentes. Cela fonctionne pour moi, avec plusieurs radios couplés par le 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

Si tout ce que vous voulez faire est d'avoir une case à cocher qui se coche, ne vous inquiétez pas de le faire avec JQuery. C'est la fonctionnalité par défaut d'une case à cocher sur un clic. Cependant, si vous voulez faire des choses supplémentaires, vous pouvez les ajouter avec JQuery. Avant jQuery 1.9, vous pouvez utiliser $(this).attr('checked'); pour obtenir la valeur au lieu de $(this).attr('checked', true);, car le deuxième définira la valeur.

Ici se trouve une démonstration fiddle qui montre la fonctionnalité par défaut de la case à cocher par rapport à ce que vous faites avec JQuery.

Note: Après JQuery 1.6, vous devriez utiliser $(this).prop; au lieu de $(this).attr dans les trois endroits (merci @Whatevo pour avoir souligné cela et voir ici pour plus de détails).

MISE À JOUR:

Désolé, j'ai raté l'exigence que cela devait être un bouton radio. Vous voudrez peut-être toujours envisager la case à cocher, mais voici le code mis à jour pour la version bouton radio. Cela fonctionne en définissant la valeurPrécédente comme attribut de la case à cocher, car je ne pense pas que prop soit pris en charge dans 1.3.2. Vous pourriez également le faire dans une variable locale, car certaines personnes n'aiment pas définir des attributs aléatoires sur des champs. Voici le nouvel exemple.

MISE À JOUR 2:

Comme l'a souligné Josh, la solution précédente ne fonctionnait qu'avec un seul bouton radio. Voici une fonction qui rend un groupe de boutons radios désélectionnables par leur nom, et un fiddle:

var makeRadiosDeselectableByName = function(name){
    $('input[name=' + name + ']').click(function() {
        if($(this).attr('previousValue') == 'true'){
            $(this).attr('checked', false)
        } else {
            $('input[name=' + name + ']').attr('previousValue', false);
        }

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

Answer 3

Instead of getting the checked value you are setting it with:

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

Pour le récupérer correctement:

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

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

// sélectionner le groupe de boutons radio (même nom)
var radioButtons = $("input[type='radio'][name='rr']");
// sauvegarder les états initiaux cochés
var radioStates = {};
$.each(radioButtons, function(index, rd) {
    radioStates[rd.value] = $(rd).is(':checked');
});

// gérer l'événement de clic
radioButtons.click(function() {

    // cocher/décocher le bouton radio
    var val = $(this).val();  
    $(this).prop('checked', (radioStates[val] = !radioStates[val]));    

    // mettre à jour l'état coché des autres boutons
    $.each(radioButtons, function(index, rd) {
        if(rd.value !== val) {
            radioStates[rd.value] = false; 
        }
    });
});

P.S.: $().attr doit être utilisé à la place de $().prop pour jquery < 1,6

Démonstration: jsFiddle

Answer 4

Meilleure et plus courte solution. Cela fonctionnera pour n'importe quel groupe de boutons radio (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'); // au cas où vous modifiez dynamiquement les éléments radio
    });
});

Plus d'informations, ici.

Profitez.

Answer 5

toggleAttr() est fourni par ce plugin très sympa et minuscule.

Code d'exemple

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

/**
 * Plugin toggleAttr
 */
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émonstration

Vous pouvez placer votre bouton radio à l'intérieur des balises label ou button et faire des choses sympas.