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

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

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

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.

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

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

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.

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

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

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

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

JSFIDDLE

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.

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.}

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

});

Cara tercepat dan termudah :

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

$el[0].checked;

$ el - adalah elemen seleksi jquery.

Nikmati!

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

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