web-dev-qa-db-fra.com

si la case à cocher est cochée, faites ceci

Lorsque je coche une case, je souhaite qu’elle devienne <p>#0099ff.

Quand je décoche la case, je veux que ça annule ça.

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

$('#checkbox').click(function(){
    if ($('#checkbox').attr('checked')) {
        /* NOT SURE WHAT TO DO HERE */
    }
})
jquerycheckboxif-statementcheckedunchecked
123
android.nick

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

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

-

Utilisation de this.checked
Andy E a rédigé un excellent article sur la façon dont nous avons tendance à abuser de jQuery: ) un élément . L'article traite spécifiquement de l'utilisation de .attr("id"), mais dans le cas où #checkbox est un élément <input type="checkbox" />, le problème est identique pour $(...).attr('checked') (ou même $(...).is(':checked')) vs this.checked.

234
jensgram

Essaye ça.

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

Parfois, nous exagérons jquery. Jquery permet d’obtenir beaucoup de choses avec javascript.

47
Chinmayee G

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

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

c'est mieux si vous définissez une classe avec une couleur différente, 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 (supposons que vous vouliez ajouter une bordure, un style de texte ou autre ...), mais il vous suffit de changer de classe.

21
fcalderan

J'ai trouvé une solution folle pour résoudre ce problème de case à cocher non cochée ou cochée ici, c'est mon algorithme ... créer une variable globale, disons var check_holder

check_holder a 3 états

  1. état non défini
  2. state
  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 déterminer si une case à cocher a été cochée ou non. Le concept sous-jacent est de sauvegarder les états de 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.

4
zedecliff

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>
3
Prabhjit Singh

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

1
Jon Ryan

Vous pouvez probablement utiliser ce code pour prendre des mesures lorsque la case à cocher est cochée ou décochée.

$('#chk').on('click',function(){
    if(this.checked==true){
      alert('yes');
    }else{
      alert('no');
    }
});
1
Sanjiv Malviya
$('#checkbox').change(function(){
   (this.checked)?$('p').css('color','#0099ff'):$('p').css('color','another_color');
});
1
Klaster_1

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

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' : '');
});
<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>
0
John Slegers