Pertanyaan jQuery, checkbox dan .is (": checked")


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, ketika saya melakukannya:

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

Kotak centang mengubah atribut yang diperiksa setelah acara tersebut dipicu.

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

PS: Saya sudah mencoba trigger('click');


76
2018-04-17 22:33


asal


Jawaban:


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

Catatan: Pada jquery versi lama, itu boleh digunakan attr. Sekarang disarankan untuk digunakan prop untuk membaca negara.


70
2018-04-17 22:56



Ada pekerjaan-sekitar 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 kelihatannya buggy dibandingkan dengan acara asli.


24
2018-04-17 23:06



Pada Juni 2016 (menggunakan jquery 2.1.4) tidak ada solusi solusi lain yang disarankan. Memeriksa attr('checked') selalu kembali undefined dan is('checked) selalu kembali false.

Cukup gunakan metode prop:

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

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

9
2018-06-13 09:05



Saya masih mengalami perilaku ini dengan jQuery 1.7.2. Sebuah solusi sederhana adalah untuk menunda eksekusi handler klik dengan setTimeout dan biarkan browser melakukan sihirnya sementara itu:

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

3
2017-09-05 10:31



Jika Anda mengantisipasi perilaku yang agak tidak diinginkan ini, maka satu lagi mengelilinginya akan melewatkan parameter ekstra dari jQuery.trigger () ke penangan klik kotak centang. Parameter ekstra ini untuk memberi tahu penangan klik bahwa klik telah dipicu secara terprogram, bukan oleh pengguna yang langsung mengklik pada kotak centang itu sendiri. Penangan klik kotak centang kemudian dapat membalikkan status pemeriksaan yang dilaporkan.

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

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

Dan inilah cara saya menangani itu di pengendali event klik kotak centang. Fungsi handler memeriksa keberadaan objek nonUI sebagai parameter kedua. (Parameter pertama adalah selalu kejadian itu sendiri.) Jika parameter ada dan disetel ke true, maka saya membalikkan status yang sudah diperiksa. Jika tidak ada parameter yang diteruskan - yang tidak akan ada jika pengguna hanya mengklik kotak centang di UI - maka saya melaporkan status 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 sudah menguji dengan Chrome, Firefox, dan IE 8.


2
2018-06-21 05:41



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

2
2017-08-21 12:50



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

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

2
2018-02-28 10:52



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

http://jsbin.com/uwupa/edit

Pada dasarnya, alih-alih mengikat acara "klik", Anda mengikat "perubahan" acara dengan peringatan.

Kemudian, ketika Anda memicu acara, pertama Anda memicu klik, lalu memicu perubahan.


0
2018-04-17 23:04