kotak centang jQuery memeriksa kondisi yang diubah


629

Saya ingin acara memecat sisi klien ketika kotak centang dicentang / tidak dicentang:

$('.checkbox').click(function() {
  if ($(this).is(':checked')) {
    // Do stuff
  }
});

Pada dasarnya saya ingin itu terjadi untuk setiap kotak centang di halaman. Apakah metode ini menembakkan klik dan memeriksa keadaan ok?

Saya pikir pasti ada cara jQuery yang lebih bersih. Adakah yang tahu solusinya?


apakah ada kebutuhan untuk mengajukan pertanyaan ini lagi, di mana pertanyaan yang sama dengan suara paling tinggi ada di stackoverflow .... stackoverflow.com/questions/901712/…
Ariful Islam

28
@Arif Saya pikir ini bukan duplikat karena pertanyaan yang ditautkan adalah tentang mendapatkan status kotak centang, sedangkan yang ini tentang acara yang dicentang.
Rachel

1
Saya selalu harus mencari properti yang diperiksa ini, ada banyak cara untuk mencapai hal ini seperti yang tertulis di sini
user3199690

Jawaban:


1229

Bind ke changeacara, bukan click. Namun, Anda mungkin masih perlu memeriksa apakah kotak centang dicentang:

$(".checkbox").change(function() {
    if(this.checked) {
        //Do stuff
    }
});

Manfaat utama dari pengikatan changeacara clicktersebut adalah tidak semua klik pada kotak centang akan menyebabkannya berubah. Jika Anda hanya ingin menangkap peristiwa yang menyebabkan kotak centang berubah status, Anda ingin acara yang diberi nama tepat change. Redacted dalam komentar

Perhatikan juga bahwa saya telah menggunakan this.checkedalih-alih membungkus elemen dalam objek jQuery dan menggunakan metode jQuery, hanya karena lebih pendek dan lebih cepat untuk mengakses properti elemen DOM secara langsung.

Edit (lihat komentar)

Untuk mendapatkan semua kotak centang, Anda memiliki beberapa opsi. Anda dapat menggunakan:checkbox pemilih-semu:

$(":checkbox")

Atau Anda dapat menggunakan atribut sama dengan pemilih:

$("input[type='checkbox']")

1
Sebenarnya saya sudah mendapatkannya mencari kotak centang oleh kelas. Apakah ada cara yang lebih baik untuk mendapatkan semua kotak centang tanpa memandang kelas?
AnonyMouse

4
@AnonyMouse - Lihat hasil edit saya. Ada beberapa cara untuk melakukannya.
James Allardice

18
@Vigrond - Sebenarnya, mengklik label tidak memicu acara klik pada kontrol terkait: jsfiddle.net/ZFG84
James Allardice

4
Ini jauh lebih bersih daripada $(this).is(':checked'). Saya pikir Anda harus menggunakan changeacara tersebut jika Anda ingin mendeteksi perubahan dari keyboard (menabrak, memukul ruang), tetapi yang mengejutkan, clickjuga mendeteksi perubahan yang bukan dari klik mouse, tidak yakin apakah itu masalah jQuery, jsfiddle.net / mendesjuan / E39sz
Juan Mendes

41
Harap dicatat: Mengikat peristiwa apa pun click, changeatau apa pun ke semua kotak centang pada halaman dapat menyebabkan masalah kinerja (bergantung pada jumlah kotak centang). Cobalah mengikat ke elemen induk atau dokumen dan menangkap peristiwa menggelegak yaitu$('form').on('change', ':checkbox', function(){ //stuff });
hitautodestruct

109

Untuk referensi di masa mendatang kepada siapa pun di sini yang mengalami kesulitan, jika Anda menambahkan kotak centang secara dinamis, jawaban yang diterima yang benar di atas tidak akan berfungsi. Anda harus memanfaatkan delegasi acara yang memungkinkan simpul induk untuk menangkap peristiwa yang menggelegak dari keturunan tertentu dan mengeluarkan panggilan balik.

// $(<parent>).on('<event>', '<child>', callback);
$(document).on('change', '.checkbox', function() {
    if(this.checked) {
      // checkbox is checked
    }
});

Perhatikan bahwa hampir selalu tidak perlu digunakan document untuk pemilih induk. Alih-alih memilih node induk yang lebih spesifik untuk mencegah penyebaran acara ke level terlalu banyak.

Contoh di bawah ini menampilkan bagaimana peristiwa node dom yang ditambahkan secara dinamis tidak memicu pendengar yang ditentukan sebelumnya.

$postList = $('#post-list');

$postList.find('h1').on('click', onH1Clicked);

function onH1Clicked() {
  alert($(this).text());
}

// simulate added content
var title = 2;

function generateRandomArticle(title) {
  $postList.append('<article class="post"><h1>Title ' + title + '</h1></article>');
}

setTimeout(generateRandomArticle.bind(null, ++title), 1000);
setTimeout(generateRandomArticle.bind(null, ++title), 5000);
setTimeout(generateRandomArticle.bind(null, ++title), 10000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="post-list" class="list post-list">
  <article class="post">
    <h1>Title 1</h1>
  </article>
  <article class="post">
    <h1>Title 2</h1>
  </article>
</section>

Sementara contoh ini menampilkan penggunaan delegasi acara untuk menangkap peristiwa untuk simpul tertentu ( h1dalam kasus ini), dan mengeluarkan panggilan balik untuk acara tersebut.

$postList = $('#post-list');

$postList.on('click', 'h1', onH1Clicked);

function onH1Clicked() {
  alert($(this).text());
}

// simulate added content
var title = 2;

function generateRandomArticle(title) {
  $postList.append('<article class="post"><h1>Title ' + title + '</h1></article>');
}

setTimeout(generateRandomArticle.bind(null, ++title), 1000); setTimeout(generateRandomArticle.bind(null, ++title), 5000); setTimeout(generateRandomArticle.bind(null, ++title), 10000);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section id="post-list" class="list post-list">
  <article class="post">
    <h1>Title 1</h1>
  </article>
  <article class="post">
    <h1>Title 2</h1>
  </article>
</section>


23

Hanya solusi lain

$('.checkbox_class').on('change', function(){ // on change of state
   if(this.checked) // if changed state is "CHECKED"
    {
        // do the magic here
    }
})

4
Sementara kode ini dapat menjawab pertanyaan, memberikan konteks tambahan tentang mengapa dan / atau bagaimana kode ini menjawab pertanyaan meningkatkan nilai jangka panjangnya.
JAL

12

Jika maksud Anda adalah untuk melampirkan acara hanya pada kotak centang yang dicentang (jadi itu akan menyala ketika mereka tidak dicentang dan diperiksa lagi nanti) maka inilah yang Anda inginkan.

$(function() {
    $("input[type='checkbox']:checked").change(function() {

    })
})

jika niat Anda adalah untuk melampirkan acara ke semua kotak centang (dicentang dan tidak dicentang)

$(function() {
    $("input[type='checkbox']").change(function() {

    })
})

jika Anda ingin menjalankannya hanya ketika mereka diperiksa (dari tidak dicentang) maka @James Allardice menjawab di atas.

BTW input[type='checkbox']:checkedadalah pemilih CSS.


Bagaimana jika Anda ingin menemukan hanya kotak centang yang tidak dicentang? Saya sudah memeriksa semua ini $ ("# tableUSNW tbody tr td [id = td1]: checkbox: checked"); tapi saya tidak tahu bagaimana menemukan semua yang tidak diperiksa.
FrenkyB

1
@FrenkyB coba yang berikut:$("input[type='checkbox']:not(:checked)")
Matas Vaitkevicius

5
$(document).ready(function () {
    $(document).on('change', 'input[Id="chkproperty"]', function (e) {
        alert($(this).val());
    });
});

3

Pengambilan tindakan berdasarkan suatu peristiwa (pada acara klik).

$('#my_checkbox').on('click',function(){
   $('#my_div').hide();
   if(this.checked){
     $('#my_div').show();
   }
});

Tanpa kejadian mengambil tindakan berdasarkan kondisi saat ini.

$('#my_div').hide();
if($('#my_checkbox').is(':checked')){
  $('#my_div').show();
}

pada acara 'klik' tidak berfungsi dalam kasus ini. pada karya 'perubahan'.
Mehmood Memon

2

mungkin ini bisa menjadi alternatif untuk Anda.

<input name="chkproperty" onchange="($(this).prop('checked') ? $(this).val(true) : $(this).val(false))" type="checkbox" value="true" />`

2

Ini adalah solusi untuk menemukan apakah kotak centang dicentang atau tidak. Gunakan fungsi #prop () //

$("#c_checkbox").on('change', function () {
                    if ($(this).prop('checked')) {
                        // do stuff//
                    }
                });

1

Coba validasi jQuery ini

$(document).ready(function() {
  $('#myform').validate({ // initialize the plugin
    rules: {
      agree: {
        required: true
      }

    },
    submitHandler: function(form) {
      alert('valid form submitted');
      return false;
    }
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-validate/1.17.0/jquery.validate.js"></script>

<form id="myform" action="" method="post">
  <div class="buttons">
    <div class="pull-right">
      <input type="checkbox" name="agree" /><br/>
      <label>I have read and agree to the <a href="https://stackexchange.com/legal/terms-of-service">Terms of services</a> </label>
    </div>
  </div>
  <button type="submit">Agree</button>
</form>


1

Sangat sederhana, ini cara saya menggunakan:

JQuery:

$(document).on('change', '[name="nameOfCheckboxes[]"]', function() {
    var checkbox = $(this), // Selected or current checkbox
        value = checkbox.val(); // Value of checkbox

    if (checkbox.is(':checked'))
    {
        console.log('checked');
    }else
    {
        console.log('not checked');
    }
});

Salam!

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.