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

$(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"));
});

});

Answer 2

DiegoP,

J'avais le même problème, jusqu'à ce que je réalise que la case à cocher ne se désactive pas tant que l'attribut n'est pas supprimé. Cela signifie que même si la valeur cochée est mise à faux, elle restera là.

Utilisez donc la fonction removeAttr() et supprimez l'attribut checked et CELA FONCTIONNERA SÛREMENT.

Answer 3

Si vous êtes toujours partant pour plus de réponses, j'ai découvert que cela fonctionne avec tous les boutons radio :

        jQuery(document).ready(function ($){
                    var allRadios = $('input[type=radio]')
                    var radioChecked;

                    var setCurrent = 
                                    function(e) {
                                        var obj = e.target;

                                        radioChecked = $(obj).attr('checked');
                                 }

                    var setCheck = 
                                function(e) {

                                    if (e.type == 'keypress' && e.charCode != 32) {
                                        return false;
                                    }

                                    var obj = e.target;

                         if (radioChecked) {
                         $(obj).attr('checked', false);
                         } else {
                         $(obj).attr('checked', true);
                         }
                             }    

                    $.each(allRadios, function(i, val){        
                         var label = $('label[for=' + $(this).attr("id") + ']');

                     $(this).bind('mousedown keydown', function(e){
                            setCurrent(e);
                        });

                        label.bind('mousedown keydown', function(e){
                            e.target = $('#' + $(this).attr("for"));
                            setCurrent(e);
                        });

                     $(this).bind('click', function(e){
                            setCheck(e);    
                        });

                    });
        });

Answer 4

Cette fonction ajoutera une coche/non-cochée à tous les boutons radio

jQuery(document).ready(function(){
    jQuery(':radio').click(function()
    {
        if ((jQuery(this).attr('checked') == 'checked') && (jQuery(this).attr('class') == 'checked'))
        {   
            jQuery(this).attr('class','unchecked');
            jQuery(this).removeAttr('checked');
        } else {
            jQuery(this).attr('class','checked');
        }//ou tout autre élément que vous voulez

    });
});

Answer 5

J'ai pris https://stackoverflow.com/a/13575528/80353 et je l'ai adapté comme ceci

$(document).ready(function() {

        $('body').on('click', 'input[type="radio"]', function() {
            changeCheckedAttributes($(this));
        });

        function changeCheckedAttributes(elt) {
            $("input[name='"+$(elt).attr("name")+"']:radio").not($(elt)).removeData("chk");
            $("input[name='"+$(elt).attr("name")+"']:radio").not($(elt)).removeAttr("checked");
            $("input[name='"+$(elt).attr("name")+"']:radio").not($(elt)).prop("checked", false);
            $(elt).data("chk",!$(elt).data("chk"));
            $(elt).prop("checked", true);
            $(elt).attr("checked", $(elt).data("chk"));
        }

    });