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

Les solutions que j'ai essayées pour cette question ne ont pas fonctionné pour moi. Parmi les réponses qui ont fonctionné partiellement, j'ai encore constaté que je devais cliquer sur le bouton radio précédemment non cochée deux fois juste pour le cocher à nouveau. J'utilise actuellement jQuery 3+.

Après avoir bidouillé en essayant de faire fonctionner cela en utilisant les attributs de données ou d'autres attributs, j'ai finalement trouvé la solution en utilisant une classe à la place.

Pour votre entrée radio cochée, donnez-lui la classe checked par exemple :

Voici le code jQuery :

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

    if ($(this).hasClass('checked')) {
        $(this).prop('checked', false);
        $(this).removeClass('checked');
    }
    else {
        $('input[name="'+name+'"]').removeClass('checked');
        $(this).addClass('checked');
    }
});

Answer 2

Si vous utilisez l'événement onclick et que vous vérifiez uniquement si le bouton radio est sélectionné, puis désélectionnez-le, le bouton radio ne sera jamais sélectionné. Donc peut-être le plus simple est d'utiliser des noms de classe comme ceci:

if($(this).hasClass('alreadyChecked')) {//il est déjà sélectionné
        $('.myRadios').removeClass('alreadyChecked');//retirer de tous les boutons radios
        $(this).prop('checked', false);//désélectionner celui-ci
    }
    else {
        $('.myRadios').removeClass('alreadyChecked');//retirer de tous
        $(this).addClass('alreadyChecked');//ajouter uniquement à celui-ci
    }

Answer 3

La solution la plus simple. Pour les cases à cocher et les boutons radio.

$('body').on('click', 'input[type="checkbox"]', function(){
    if ($(this).attr('checked')){
        $( this ).attr( 'checked', false);
    } else {
        $( this ).attr( 'checked', true);
    }
});
$('body').on('click', 'input[type="radio"]', function(){
    var name = $(this).attr('name');
    $("input[name="+name+"]:radio").attr('checked', false);
    $( this ).attr( 'checked', true);
});

Answer 4

Je pense que c'est la façon la plus courte. Je l'ai testé sur Chrome et MS Edge.

$(document).on('click', 'input:radio', function () {
    var check = $(this).attr('checked')
    if (check) $(this).removeAttr('checked').prop('checked',false)
    else $(this).attr('checked', true).prop('checked',true)
})

Ce morceau de code fonctionne également sur les contenus chargés en AJAX.

Alternativement, vous pouvez également utiliser

$(document).on('click mousedown', 'input:radio', function (e) {
    e.preventDefault()
    if ($(this).prop('checked')) $(this).prop('checked', false)
    else $(this).prop('checked', true)
})

Cela fonctionnerait mieux sans aucune exception.

Answer 5

Certaines des réponses de ce fil de discussion m'ont été utiles, et j'ai pensé partager une réponse mise à jour utilisant jQuery et HTML 5 :

$(function () {
    // Nous permet de décocher facilement des boutons radio.
    $("input[type='radio']").click(function (e) {
        var htmlName = $(this).attr('name');
        var radio = $("input[name='" + htmlName + "'][value='" + $(this).val() + "']");
        // Comme onclick() et preventDefault() fonctionnent différemment pour les boutons radio, nous
        // devons attendre que toutes les valeurs soient définies,
        // puis les définir comme nous le souhaitons.
        setTimeout(function () {
            // $(radio).is(":checked") renverra toujours true, donc nous devons
            // définir notre propre propriété HTML.
            if ($(radio).attr('data-checked-before') == 'true') {
                $(radio).prop("checked", false);
            }
            ClearCheckedBefore(htmlName);
            // Enregistrer l'état pour la prochaine fois que nous le regardons.
            $(radio).attr('data-checked-before', $(radio).is(':checked').toString());
        }, 5);
    });
});

// Marque tous les attributs data-checked-before comme false, afin que les
// conditions if dans la fonction setTimeout ne soient pas confuses.
function ClearCheckedBefore(htmlName) {
    $("input[name='" + htmlName + "']").each(function (index, value) {
        $(value).attr('data-checked-before', 'false');
    });
}