jika kotak centang dicentang, lakukan ini


126

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 */
    }
}) 

1
"... ketika tidak dicentang, untuk menonaktifkan fungsi yang sama." - fungsi yang diteruskan ke .click()dipanggil pada acara klik. Karena itu saya tidak mengerti apa yang Anda maksud dengan "aktifkan" dan "nonaktifkan". Jika kotak centang dicentang, Anda dapat menjalankan fungsi a(). Tetapi Anda harus menulis fungsi terbalik untuk meminta ketika kotak centang tidak dicentang. Saya bingung.
jensgram

Anda bisa, tentu saja, .bind()dan .unbind()acara ke elemen lain berdasarkan pada kondisi kotak centang. Itukah yang Anda cari?
jensgram

1
Maaf untuk mengirim spam tetapi saya telah membuat contoh tentang apa yang saya bicarakan.
jensgram

1
Saya tahu ini adalah posting lama, tetapi sekarang jQuery menggunakan prop()untuk apa pertanyaan ini ingin digunakan attr(); yang prop()metode belum dibuat saat itu. Namun, jawabannya this.checkedmungkin masih bermanfaat.
trysis

Jawaban:


235

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.


48

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.


34

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

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

Dalam kasus saya, saya baru saja mengubahnya $(':checkbox')untuk membuatnya bekerja;)
Pathros

21

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


4
+1 untuk solusi umum. Tidak ada alasan untuk melakukan $('#checkbox').attr('checked'), namun, jika kita tahu bahwa #checkbox adalah kotak centang (jika tidak, ID ini agak menyesatkan). this.checkedakan melakukan.
jensgram

@ jensgram @fcalderan +1 Terima kasih atas tipnya! Saya belum pernah melihat toggleClass dengan sakelar. Saya menghapus posting saya karena tidak berguna. Maaf terlalu pemilih, tapi saya pikir jawaban ini akan 100% sempurna tanpa 'kotak centang' dipilih dua kali: mungkin menggunakan $ (ini) sebagai gantinya? Atau solusi jensgram?
serang

@ serangan tentu saja Anda dapat men-cache elemen Anda sebelum menggunakan (lihat kode sekarang). this.checked bahkan lebih cepat dari $ (..). attr ('checked')

4

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.


1
Solusinya memang gila tapi tidak dengan cara yang baik. Ya variabel global dapat membantu Anda memecahkan masalah hari ini, tetapi mereka hampir pasti akan menjadi masalah bagi Anda besok. Cobalah untuk menghindarinya jika memungkinkan, yaitu 99% dari waktu. Mereka membuat mustahil untuk alasan tentang kode Anda tanpa khawatir tentang keadaan global. Satu variabel global mungkin terlihat tidak bersalah tetapi dengan cepat menjadi puluhan kemudian ratusan. Pernah ke sana, melihat itu dan itu tidak cantik.
bijancn

3

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>

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

1

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


0

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>


0

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');
     }
});
Dengan menggunakan situs kami, Anda mengakui telah membaca dan memahami Kebijakan Cookie dan Kebijakan Privasi kami.
Licensed under cc by-sa 3.0 with attribution required.