Wenn das Kontrollkästchen aktiviert ist, tun Sie dies

Wenn ich ein Kontrollkästchen aktiviere, soll es sich drehen <p> #0099ff.

Wenn ich das Kontrollkästchen deaktiviere, soll es rückgängig gemacht werden.

Code, den ich bisher habe:

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

Ich würde verwenden .change() und this.checked:

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

- -

Über die Verwendung von this.checked
Andy E wurde ausführlich beschrieben, wie wir dazu neigen, jQuery zu überbeanspruchen: Nutzen Sie die unglaubliche Leistung von jQuery, um auf Eigenschaften eines Elements zuzugreifen . Der Artikel behandelt speziell die Verwendung von, .attr("id")aber in dem Fall, dass #checkbox es sich um ein <input type="checkbox" />Element handelt , ist das Problem für $(...).attr('checked')(oder sogar) dasselbe$(...).is(':checked') ) vs. this.checked.

Versuche dies.

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

Manchmal übertreiben wir jquery. Viele Dinge können mit jquery mit einfachem Javascript erreicht werden.

Es kann vorkommen, dass "this.checked" immer "on" ist. Daher empfehle ich:

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

Wenn Sie eine Klasse mit einer anderen Farbe definieren, wechseln Sie die Klasse

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

Auf diese Weise ist Ihr Code sauberer, da Sie nicht alle CSS-Eigenschaften angeben müssen (sagen wir, Sie möchten einen Rahmen, einen Textstil oder einen anderen hinzufügen ...), sondern nur eine Klasse wechseln

Ich habe eine verrückte Lösung für den Umgang mit diesem Problem gefunden, bei dem das Kontrollkästchen hier nicht aktiviert oder aktiviert ist. Hier ist mein Algorithmus ... Erstellen Sie eine globale Variable, sagen wir var check_holder

check_holder hat 3 Zustände

1. undefinierter Zustand
2. 0 Zustand
3. 1 Zustand

Wenn das Kontrollkästchen aktiviert ist,

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

Der obige Code kann in vielen Situationen verwendet werden, um herauszufinden, ob ein Kontrollkästchen aktiviert wurde oder nicht. Das Konzept dahinter besteht darin, die Kontrollkästchenzustände in einer Variablen zu speichern, dh wenn sie aktiviert oder deaktiviert ist. Ich hoffe, die Logik kann verwendet werden, um Ihr Problem zu lösen.

Überprüfen Sie diesen 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>

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

Wahrscheinlich können Sie mit diesem Code Aktionen ausführen, wenn das Kontrollkästchen aktiviert oder deaktiviert ist.

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

Ich würde tun:

$('#checkbox').on("change", function (e){ 

    if(this.checked){

      // Do one thing 

    }

    else{

     // Do some other thing

    }

});

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

Optimale Implementierung

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

Demo

$('#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>

Warum nicht die eingebauten Ereignisse nutzen?

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