si la case est cochée, faites-le

126

Lorsque je coche une case, je veux qu'elle soit activée <p> #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 */
    }
}) 
android.nick
la source
1
"... quand il est décoché, pour désactiver cette même fonction." - la fonction passée à .click()est appelée lors de l'événement click. Par conséquent, je ne comprends pas ce que vous entendez par «activer» et «désactiver». Si la case est cochée, vous pouvez appeler la fonction a(). Mais vous devez écrire la fonction inverse à invoquer lorsque la case n'est pas cochée. Je suis confus.
jensgram
Vous pouvez, bien sûr, .bind()et des .unbind()événements à un autre élément en fonction de l'état de la case à cocher. C'est ce que vous recherchez?
jensgram
1
Désolé pour le spam, mais j'ai fait un exemple de ce dont je parle.
jensgram
1
Je sais que c'est un ancien post, mais maintenant jQuery utilise prop()pour ce que cette question voulait utiliser attr(); la prop()méthode n'avait pas été créée à l'époque. Les réponses sur this.checkedsont probablement encore utiles, cependant.
trysis

Réponses:

235

J'utiliser .change() et this.checked:

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

-

Sur l'utilisation d' this.checked
Andy E a fait un excellent article sur la façon dont nous avons tendance à abuser de 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ù il #checkbox s'agit d' un <input type="checkbox" />élément, le problème est le même pour $(...).attr('checked')(ou même $(...).is(':checked')) vs this.checked..

Jensgram
la source
48

Essaye ça.

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

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

Chinmayee G
la source
34

Il peut arriver que "this.checked" soit toujours "on". Par conséquent, je recommande:

$('#checkbox').change(function() {
  if ($(this).is(':checked')) {
    console.log('Checked');
  } else {
    console.log('Unchecked');
  }
});
Benny Neugebauer
la source
Dans mon cas, je viens de changer pour $(':checkbox')que cela fonctionne;)
Pathros
21

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 à spécifier toutes les propriétés css (disons que vous voulez ajouter une bordure, un style de texte ou autre ...) mais vous changez simplement de classe


la source
4
+1 pour la solution générique. Il n'y a aucune raison de le faire $('#checkbox').attr('checked'), cependant, si nous savons que #checkbox c'est une case à cocher (sinon, l'ID est plutôt trompeur). this.checkedça ira.
jensgram
@jensgram @fcalderan +1 Merci pour le tuyau! Je n'avais jamais vu toggleClass avec interrupteur. Je supprime mon message car il est inutile. Désolé d'être si pointilleux, mais je pense que cette réponse serait parfaite à 100% sans que '#checkbox' ne soit sélectionné deux fois: peut-être utiliser $ (this) à la place? Ou la solution de Jensgram?
attaque
@attack bien sûr, vous pouvez mettre en cache votre élément avant de l'utiliser (voir le code maintenant). this.checked est encore plus rapide que $ (..). attr ('checked')
4

J'ai trouvé une solution folle pour traiter ce problème de case à cocher non cochée ou cochée 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 est coché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 savoir si une case a été cochée ou non. Le concept sous-jacent est de sauvegarder les états des cases à 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.

zedecliff
la source
1
La solution est certes folle mais pas dans le bon sens. Oui, les variables globales peuvent vous aider à résoudre un problème aujourd'hui, mais elles deviendront presque certainement un problème pour vous demain. Essayez de les éviter dans la mesure du possible, ce qui est 99% du temps. Ils rendent impossible de raisonner sur votre code sans se soucier de l'état global. Une variable globale peut sembler innocente, mais elle devient rapidement des dizaines puis des centaines. J'y suis allé, j'ai vu ça et ce n'est pas joli.
bijancn
3

Vérifiez ce code:

<!-- script to check whether checkbox checked or not using prop function -->
<script>
$('#change_password').click(function(){
    if($(this).prop("checked") == true){ //can also use $(this).prop("checked") which will return a boolean.
        alert("checked");
    }
    else if($(this).prop("checked") == false){
        alert("Checkbox is unchecked.");
    }
});
</script>
Prabhjit Singh
la source
1
$('#checkbox').change(function(){
   (this.checked)?$('p').css('color','#0099ff'):$('p').css('color','another_color');
});
Klaster_1
la source
1

Vous pouvez probablement utiliser ce code pour entreprendre des actions car la case est cochée ou décochée.

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

Implémentation optimale

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

Démo

$('#checkbox').on('change', function(){
    $('p').css('color', this.checked ? '#09f' : '');
});
<script src="https://code.jquery.com/jquery-1.12.2.min.js"></script>
<input id="checkbox" type="checkbox" /> 
<p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
    eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
<p>
    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.
</p>

John Slegers
la source
0

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');
     }
});
Paul 501
la source