jQuery, checkboxes dan .is (": dicentang")


88

Ketika saya mengikat fungsi ke elemen kotak centang seperti:

$("#myCheckbox").click( function() {
    alert($(this).is(":checked"));
});

Kotak centang mengubah atribut yang dicentang sebelum acara dipicu, ini adalah perilaku normal, dan memberikan hasil terbalik.

Namun, saat saya melakukannya:

$("#myCheckbox").click();

Kotak centang mengubah atribut yang diperiksa setelah peristiwa dipicu.

Pertanyaan saya adalah, apakah ada cara untuk memicu peristiwa klik dari jQuery seperti yang dilakukan klik normal (skenario pertama)?

PS: Saya sudah coba dengan trigger('click');


5
Saya baru saja memverifikasi ini. Anda sepenuhnya benar. Itu tampak seperti itu mungkin bug. Saya akan membesarkannya sebagai bug dengan jQuery dan melihat apa yang terjadi dev.jquery.com
cletus

1
Bagaimana dengan acara 'ubah'?
ZippyV

@cletus Memang, ini adalah bug Jquery 1.4.2. 1.3.2 berfungsi dengan baik.
Ben

Saya melihat perilaku yang sama di 1.4.2 dan 1.3.2: jsfiddle.net/HCUNn
Nick Craver

@Nick Ini masih melakukan kebalikan dari apa yang biasa dilakukan klik mouse. Sejujurnya saya tidak tahu mengapa 1.3.2 bekerja untuk saya dan 1.4.2 tidak, tapi tetap saja, itu perlu diubah.
Ben

Jawaban:


98
$('#myCheckbox').change(function () {
    if ($(this).prop("checked")) {
        // checked
        return;
    }
    // not checked
});

Catatan: Pada jquery versi lama tidak masalah untuk digunakan attr. Sekarang disarankan untuk menggunakanprop untuk membaca keadaan.


1
Saya sudah mencobanya, "$ (# myCheckbox) .click ()" hapus centang / centang kotak tetapi fungsi perubahan tidak pernah dipicu. Saya juga mencoba mengubah atribut 'check' daripada memanggil click () dan bahkan mengatur fungsi 'change' menjadi 'live'.
Ben

@ Ben - Anda harus memicunya dengan cara berbeda untuk menjalankannya, lihat jawaban saya untuk pernyataan trigger.
Nick Craver

@Nick Terima kasih, saya akan menerima jawaban tcurdt karena dia yang pertama keluar dengan solusinya. Konyolnya saya, saya tidak memicu metode 'ubah'.
Ben

19
dan untuk versi jquery yang lebih baru, fungsinya adalah prop ("diperiksa") daripada attr ("diperiksa") jika ada orang lain yang keluar.
danski

Saya akan menghindari 'prop' karena non-kompatibilitas ke belakang, esp. di IE.
vapcguy

27

Ada solusi yang berfungsi di jQuery 1.3.2 dan 1.4.2 :

$("#myCheckbox").change( function() {
    alert($(this).is(":checked"));
});

//Trigger by:
$("#myCheckbox").trigger('click').trigger('change');​​​​​​​​​​​​​

Tapi saya setuju, perilaku ini tampak buggy dibandingkan dengan acara asli.


10

Pada Juni 2016 (menggunakan jquery 2.1.4) tidak ada solusi lain yang disarankan yang berfungsi. Pemeriksaan attr('checked')selalu kembali undefineddan is('checked)selalu kembali false.

Cukup gunakan metode prop:

$("#checkbox").change(function(e) {

  if ($(this).prop('checked')){
    console.log('checked');
  }
});

2
is('checked)akan mengembalikan nilai salah karena "dicentang" bukan pemilih semu CSS. Yang benar harus is(':checked')jadi itu mencari ": diperiksa" sebagai gantinya.
dhaupin

4

Saya masih mengalami perilaku ini dengan jQuery 1.7.2. Solusi sederhana adalah dengan menunda eksekusi handler klik dengan setTimeout dan sementara itu biarkan browser melakukan keajaibannya:

$("#myCheckbox").click( function() {
    var that = this;
    setTimeout(function(){
        alert($(that).is(":checked"));
    });
});

Ya! Sedikit offtopic, tapi saya harus melakukan hal yang sama di Kendo grid dengan checkbox ketika seseorang mengklik "Add new record" jika saya ingin "Active" secara default. Saya juga harus memberikan waktu 500ms. Lalu saya harus menambahkan .click(), lalu mengatur .attr('value', 'true'), lalu .change(), .blur()sebelum secara terprogram akan mengatur kotak ketika saya mengklik tombol "Perbarui" secara terprogram ....
vapcguy

2

Jika Anda mengantisipasi perilaku yang agak tidak diinginkan ini, maka salah satu tindakan selanjutnya adalah meneruskan parameter tambahan dari jQuery.trigger () ke penangan klik kotak centang. Parameter tambahan ini untuk memberi tahu penangan klik bahwa klik telah dipicu secara terprogram, bukan oleh pengguna yang langsung mengeklik kotak centang itu sendiri. Penangan klik kotak centang kemudian dapat membalik status pemeriksaan yang dilaporkan.

Jadi, inilah cara saya memicu peristiwa klik pada kotak centang dengan ID "myCheckBox". Perhatikan bahwa saya juga mengirimkan parameter objek dengan satu anggota, nonUI, yang disetel ke true:

$("#myCheckbox").trigger('click', {nonUI : true})

Dan inilah cara saya menanganinya di pengendali event klik kotak centang. Fungsi handler memeriksa keberadaan objek nonUI sebagai parameter keduanya. (Parameter pertama selalu adalah peristiwa itu sendiri.) Jika parameter ada dan disetel ke true maka saya membalik status .checked yang dilaporkan. Jika tidak ada parameter seperti itu yang dilewatkan - yang tidak akan ada jika pengguna cukup mengklik kotak centang di UI - maka saya melaporkan status .checked yang sebenarnya:

$("#myCheckbox").click(function(e, parameters) {
   var nonUI = false;
        try {
            nonUI = parameters.nonUI;
        } catch (e) {}
        var checked = nonUI ? !this.checked : this.checked;
        alert('Checked = ' + checked);
    });

Versi JSFiddle di http://jsfiddle.net/BrownieBoy/h5mDZ/

Saya telah menguji dengan Chrome, Firefox dan IE 8.


2
<input id="widget-wpb_widget-3-custom_date" class="mycheck" type="checkbox" value="d/M/y" name="widget-wpb_widget[3][custom_date]" unchecked="true">    

var atrib = $('.mycheck').attr("unchecked",true);
$('.mycheck').click(function(){
if ($(this).is(":checked")) 
{
$('.mycheck').attr("unchecked",false);
   alert("checkbox checked");
}
else
{
$('.mycheck').attr("unchecked",true);
 alert("checkbox unchecked");
}
});

Beberapa komentar akan menyenangkan
Danil Gaponov

1
  $("#checkbox").change(function(e) {

  if ($(this).prop('checked')){
    console.log('checked');
  }
});

1
$("#personal").click(function() {
      if ($(this).is(":checked")) {
            alert('Personal');
        /* var validator = $("#register_france").validate(); 
        validator.resetForm(); */
      }
            }
            );

JSFIDDLE


0

Nah, untuk mencocokkan skenario pertama, ini adalah sesuatu yang saya pikirkan.

http://jsbin.com/uwupa/edit

Pada dasarnya, alih-alih mengikat peristiwa "klik", Anda mengikat peristiwa "ubah" dengan lansiran.

Lalu, saat Anda memicu peristiwa, pertama Anda memicu klik, lalu memicu perubahan.


0

Selain jawaban Nick Craver, agar ini berfungsi dengan baik, IE 8Anda perlu menambahkan handler klik tambahan ke kotak centang:

// needed for IE 8 compatibility
if ($.browser.msie)
    $("#myCheckbox").click(function() { $(this).trigger('change'); });

$("#myCheckbox").change( function() {
    alert($(this).is(":checked"));
});

//Trigger by:
$("#myCheckbox").trigger('click').trigger('change');

Jika tidak, callback hanya akan dipicu saat kotak centang kehilangan fokus, seperti IE 8 tetap fokus pada kotak centang dan radio saat diklik.

Belum diuji IE 9.


0
$( "#checkbox" ).change(function() {
    if($(this).is(":checked")){
        alert('hi');
    }

});

1
Mohon sebutkan beberapa detail
CodeWarrior

Sepertinya ini hanya jawaban yang diulang, menggunakan changebukan OP click, dan hanya menggunakan ifpernyataan sebagai cara pengujian yang berbeda :checked.
vapcguy

-1

Cara tercepat dan termudah :

$('#myCheckbox').change(function(){
    alert(this.checked);
});

$el[0].checked;

$ el - adalah elemen seleksi jquery.

Nikmati!


-2
if ($.browser.msie) {
    $("#myCheckbox").click(function() { $(this).trigger('change'); });
}

$("#myCheckbox").change(function() {
        alert($(this).is(":checked"));
    });
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.