jika kotak centang dicentang, lakukan ini

Ketika saya mencentang kotak centang, saya ingin itu berubah <p> #0099ff.

Ketika saya hapus centang pada kotak centang, saya ingin membatalkannya.

Kode yang saya miliki sejauh ini:

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

Saya akan menggunakan .change() dan this.checked:

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

-

Saat menggunakan this.checked
Andy E telah dilakukan penulisan yang bagus tentang bagaimana kita cenderung menggunakan jQuery secara berlebihan: Memanfaatkan kekuatan jQuery yang luar biasa untuk mengakses properti suatu elemen . Artikel ini khusus memperlakukan penggunaan .attr("id")tetapi dalam kasus yang #checkbox merupakan sebuah <input type="checkbox" />elemen masalah adalah sama untuk $(...).attr('checked')(atau bahkan $(...).is(':checked')) vs this.checked.

Coba ini.

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

Terkadang kita terlalu banyak menuntut jquery. Banyak hal dapat dicapai dengan menggunakan jquery dengan javascript biasa.

Mungkin saja "this.checked" selalu "aktif". Karena itu, saya merekomendasikan:

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

lebih baik jika Anda mendefinisikan kelas dengan warna yang berbeda, maka Anda beralih kelas

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

dengan cara ini kode Anda lebih bersih karena Anda tidak harus menentukan semua properti css (katakanlah Anda ingin menambahkan perbatasan, gaya teks atau lainnya ...) tetapi Anda hanya mengganti kelas

Saya menemukan solusi gila untuk menangani masalah kotak centang ini tidak dicentang atau diperiksa di sini adalah algoritma saya ... buat variabel global katakanlah var check_holder

check_holder memiliki 3 status

1. keadaan tidak terdefinisi
2. 0 status
3. 1 negara

Jika kotak centang diklik,

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

Kode di atas dapat digunakan dalam banyak situasi untuk mengetahui apakah kotak centang telah dicentang atau tidak dicentang. Konsep di baliknya adalah untuk menyimpan status kotak centang dalam suatu variabel, yaitu saat dinyalakan, dimatikan. Saya harap logika dapat digunakan untuk menyelesaikan masalah Anda.

Periksa kode ini:

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

Mungkin Anda bisa menggunakan kode ini untuk mengambil tindakan ketika kotak centang dicentang atau tidak dicentang.

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

Saya akan lakukan:

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

    if(this.checked){

      // Do one thing 

    }

    else{

     // Do some other thing

    }

});

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

Implementasi yang optimal

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

Mengapa tidak menggunakan acara bawaan?

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