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 crois que c'est le problème : Si vous avez plus d'un bouton radio, et que l'un d'entre eux est cliqué, il n'y a aucun moyen de les désélectionner tous. Ce qu'il faut, c'est un sélecteur "aucun ou un seul", donc les cases à cocher ne seraient pas appropriées. Vous pourriez avoir un bouton "effacer" ou quelque chose comme ça pour tout désélectionner, mais ce serait bien de pouvoir simplement cliquer sur le bouton radio sélectionné pour le désélectionner et revenir à l'état "aucun", afin de ne pas encombrer votre interface utilisateur avec un contrôle supplémentaire.

Le problème avec l'utilisation d'un gestionnaire de clics est que lorsque celui-ci est appelé, le bouton radio est déjà coché. Vous ne savez pas s'il s'agit du clic initial ou d'un deuxième clic sur un bouton radio déjà coché. J'utilise donc deux gestionnaires d'événements, mousedown pour définir l'état précédent, puis le gestionnaire de clic tel qu'utilisé ci-dessus :

$("input[name=myRadioGroup]").mousedown(function () 
{
    $(this).attr('previous-value', $(this).prop('checked'));
});

$("input[name=myRadioGroup]").click(function () 
{
    var previousValue = $(this).attr('previous-value');

    if (previousValue == 'true')
        $(this).prop('checked', false);
});

Answer 2

        $(document).on("click", "input[type='radio']", function(e) {
            var checked = $(this).attr("checked");
            if(!checked){
                $(this).attr("checked", true);
            } else {
                $(this).removeAttr("checked");
                $(this).prop("checked", false);
            }
        });

 Radio

Answer 3

-- MODIFIER --

Il semble bien que votre code force une entrée radio à se comporter comme une entrée de case à cocher. Vous pourriez envisager d'utiliser simplement une entrée de case à cocher sans avoir besoin de jQuery. Cependant, si vous souhaitez forcer, comme @manji l'a dit, vous devez stocker la valeur en dehors du gestionnaire de clic et la définir à chaque clic sur l'opposé de ce qu'elle est à ce moment-là. La réponse de @manji est correcte, je voudrais simplement ajouter que vous devriez mettre en cache les objets jQuery au lieu de re-questionner le DOM :

var $radio = $("#radioinstant"),
    isChecked = $radio.attr("checked");

$radio.click(function() {

    isChecked = !isChecked;
    $(this).attr("checked", isChecked);

});

Answer 4

Version améliorée de la réponse de Jurrie

$('#myRadio').off('click').on('click', function() {
  if ($(this).data('checked')) {
    $(this).removeAttr('checked');
    $(this).data('checked', false);
  } else {
    $(this).data('checked', true);
  }
});

Démo en direct

Answer 5

Après avoir testé certaines des solutions ci-dessus qui n'ont pas fonctionné à 100% pour moi, j'ai décidé de créer la mienne. Il crée de nouveaux écouteurs de clic après qu'un bouton radio ait été cliqué :

/**
 * Radio select toggler
 * permet aux boutons radio d'être basculés lorsqu'ils sont cliqués
 * Créé par Michal le 09/05/2016.
 */

var radios = $('input[type=radio]');

/**
 * Ajoute des écouteurs de clic à toutes les cases à cocher pour désélectionner la case si elle était déjà cochée
 */
function updateCheckboxes() {
    radios.unbind('click');
    radios.filter(':checked').click(function () {
        $(this).prop('checked', false);
    });
    radios.click(function () {
        updateCheckboxes();
    });
}

updateCheckboxes();