Si la case est cochée, faites ceci

Lorsque je coche une case à cocher, je veux qu’elle tourne

#0099ff .

Lorsque je décoche la case, je veux l’annuler.

Code que j’ai jusqu’à présent:

 $('#checkbox').click(function(){ if ($('#checkbox').attr('checked')) { /* NOT SURE WHAT TO DO HERE */ } }) 

    Je voudrais utiliser .change() et this.checked :

     $('#checkbox').change(function(){ var c = this.checked ? '#f00' : '#09f'; $('p').css('color', c); }); 

    En utilisant this.checked
    Andy E a bien écrit sur la façon dont nous avons tendance à utiliser jQuery: utiliser la puissance impressionnante de jQuery pour accéder aux propriétés d’un élément . L’article traite spécifiquement de l’utilisation de .attr("id") mais dans le cas où #checkbox est un #checkbox , le problème est le même pour $(...).attr('checked') (ou même $(...).is(':checked') ) vs. this.checked .

    Essaye ça.

     $('#checkbox').click(function(){ if (this.checked) { $('p').css('color', '#0099ff') } }) 

    Parfois, nous exagérons le jquery. Beaucoup de choses peuvent être réalisées en utilisant jquery avec javascript.

    Il peut arriver que “this.checked” soit toujours “activé”. Par conséquent, je recommande:

     $('#checkbox').change(function() { if ($(this).is(':checked')) { console.log('Checked'); } else { console.log('Unchecked'); } }); 

    c’est mieux si vous définissez une classe avec une couleur différente, alors vous changez de classe

     $('#checkbox').click(function(){ var chk = $(this); $('p').toggleClass('selected', chk.attr('checked')); }) 

    de cette façon, votre code est plus propre car vous n’avez pas besoin de spécifier toutes les propriétés css (disons que vous voulez append une bordure, un style de texte ou autre …) mais vous ne faites que changer de classe

    J’ai trouvé une solution folle pour faire face à ce problème de case à cocher non vérifié ou vérifié, voici mon algorithme … créer une variable globale disons var check_holder

    check_holder a 3 états

    1. état indéfini
    2. 0 état
    3. 1 état

    Si la case à cocher est cliquée,

     $(document).on("click","#check",function(){ if(typeof(check_holder)=="undefined"){ //this means that it is the first time and the check is going to be checked //do something check_holder=1; //indicates that the is checked,it is in checked state } else if(check_holder==1){ //do something when the check is going to be unchecked check_holder=0; //it means that it is not checked,it is in unchecked state } else if(check_holder==0){ //do something when the check is going to be checked check_holder=1;//indicates that it is in a checked state } }); 

    Le code ci-dessus peut être utilisé dans de nombreuses situations pour déterminer si une case à cocher a été cochée ou non. Le concept sous-jacent est de sauvegarder les états de la case à cocher dans une variable, c’est-à-dire quand elle est activée, désactivée. J’espère que la logique peut être utilisée pour résoudre votre problème.

    Vérifiez ce code:

       
     $('#checkbox').change(function(){ (this.checked)?$('p').css('color','#0099ff'):$('p').css('color','another_color'); }); 

    Vous pouvez probablement utiliser ce code pour effectuer des actions lorsque la case à cocher est cochée ou non.

     $('#chk').on('click',function(){ if(this.checked==true){ alert('yes'); }else{ alert('no'); } }); 

    Je ferais :

     $('#checkbox').on("change", function (e){ if(this.checked){ // Do one thing } else{ // Do some other thing } }); 

    Voir: https://www.w3schools.com/jsref/prop_checkbox_checked.asp

    Mise en œuvre optimale

     $('#checkbox').on('change', function(){ $('p').css('color', this.checked ? '#09f' : ''); }); 

    Démo

     $('#checkbox').on('change', function(){ $('p').css('color', this.checked ? '#09f' : ''); }); 
       

    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

    Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

    Pourquoi ne pas utiliser les événements intégrés?

     $('#checkbox').click(function(e){ if(e.target.checked) { // code to run if checked console.log('Checked'); } else { //code to run if unchecked console.log('Unchecked'); } });