se la casella di controllo è selezionata, fare questo

Quando seleziono una casella di controllo, voglio che giri <p> #0099ff.

Quando deseleziono la casella di controllo, desidero che venga annullata.

Codice che ho finora:

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

Vorrei usare .change() e this.checked:

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

-

L'utilizzo di this.checked
Andy E ha fatto un ottimo commento su come tendiamo ad abusare di jQuery: sfruttando il fantastico potere di jQuery per accedere alle proprietà di un elemento . L'articolo tratta specificamente l'uso di .attr("id"), ma nel caso in cui #checkbox sia un <input type="checkbox" />elemento il problema è lo stesso per $(...).attr('checked')(pari o $(...).is(':checked')) vs. this.checked.

Prova questo.

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

A volte esageriamo con jquery. Molte cose possono essere raggiunte usando jquery con javascript semplice.

Può succedere che "this.checked" sia sempre "attivo". Pertanto, raccomando:

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

è meglio se si definisce una classe con un colore diverso, quindi si cambia la classe

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

in questo modo il tuo codice è più pulito perché non devi specificare tutte le proprietà dei CSS (diciamo che vuoi aggiungere un bordo, uno stile di testo o altro ...) ma cambi semplicemente una classe

Ho scoperto una pazza soluzione per affrontare questo problema con la casella non selezionata o selezionata qui è il mio algoritmo ... creare una variabile globale diciamo var check_holder

check_holder ha 3 stati

1. stato indefinito
2. 0 stato
3. 1 stato

Se si fa clic sulla casella di controllo,

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

Il codice sopra può essere utilizzato in molte situazioni per scoprire se una casella è stata selezionata o meno. Il concetto alla base è quello di salvare gli stati della casella in una variabile, cioè quando è acceso, spento. Spero che la logica possa essere usata per risolvere il tuo problema.

Controlla questo codice:

<!-- 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');
});

Probabilmente puoi utilizzare questo codice per eseguire azioni poiché la casella di controllo è selezionata o deselezionata.

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

Farei :

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

    if(this.checked){

      // Do one thing 

    }

    else{

     // Do some other thing

    }

});

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

Implementazione ottimale

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

dimostrazione

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

Perché non usare gli eventi integrati?

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