jQuery ช่องทำเครื่องหมายและ. is (“: checked”)

เมื่อฉันผูกฟังก์ชันเข้ากับองค์ประกอบช่องทำเครื่องหมายเช่น:

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

ช่องทำเครื่องหมายจะเปลี่ยนแอตทริบิวต์ที่ตรวจสอบแล้วก่อนที่เหตุการณ์จะถูกทริกเกอร์นี่เป็นพฤติกรรมปกติและให้ผลลัพธ์ผกผัน

อย่างไรก็ตามเมื่อฉันทำ:

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

ช่องทำเครื่องหมายจะเปลี่ยนแอตทริบิวต์ที่ตรวจสอบแล้วหลังจากเหตุการณ์ถูกทริกเกอร์

คำถามของฉันคือมีวิธีทริกเกอร์เหตุการณ์คลิกจาก jQuery เหมือนกับการคลิกปกติหรือไม่ (สถานการณ์แรก)

PS: ฉันได้ลองแล้วtrigger('click');

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

หมายเหตุ: ใน jquery เวอร์ชันเก่าสามารถattrใช้ได้ ตอนนี้แนะนำให้ใช้propเพื่ออ่านสถานะ

มีวิธีแก้ไขที่ทำงานใน jQuery 1.3.2และ1.4.2 :

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

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

แต่ฉันเห็นด้วยพฤติกรรมนี้ดูเหมือนจะมีปัญหาเมื่อเทียบกับเหตุการณ์พื้นเมือง

ณ เดือนมิถุนายน 2016 (โดยใช้ jquery 2.1.4) ไม่มีวิธีแก้ปัญหาอื่น ๆ ที่แนะนำได้ผล กำลังตรวจสอบattr('checked')อยู่เสมอผลตอบแทนundefinedและผลตอบแทนเสมอis('checked)false

เพียงใช้วิธี prop:

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

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

ฉันยังคงพบพฤติกรรมนี้กับ jQuery 1.7.2 วิธีแก้ปัญหาง่ายๆคือการเลื่อนการดำเนินการของตัวจัดการการคลิกด้วย setTimeout และปล่อยให้เบราว์เซอร์ใช้เวทมนตร์ในระหว่างนี้:

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

หากคุณคาดว่าจะมีพฤติกรรมที่ไม่พึงประสงค์นี้สิ่งหนึ่งที่อยู่รอบ ๆ ก็คือการส่งผ่านพารามิเตอร์พิเศษจาก jQuery.trigger () ไปยังตัวจัดการคลิกของช่องทำเครื่องหมาย พารามิเตอร์พิเศษนี้ใช้เพื่อแจ้งให้เครื่องจัดการคลิกทราบว่าการคลิกถูกทริกเกอร์โดยทางโปรแกรมแทนที่จะเป็นโดยผู้ใช้คลิกที่ช่องทำเครื่องหมายโดยตรง ตัวจัดการการคลิกของช่องทำเครื่องหมายสามารถเปลี่ยนสถานะการตรวจสอบที่รายงานได้

ต่อไปนี้เป็นวิธีที่ฉันจะเรียกเหตุการณ์การคลิกในช่องทำเครื่องหมายที่มี ID "myCheckBox" โปรดทราบว่าฉันกำลังส่งพารามิเตอร์อ็อบเจ็กต์ด้วยสมาชิกตัวเดียว nonUI ซึ่งตั้งค่าเป็น true:

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

และนี่คือวิธีจัดการในตัวจัดการเหตุการณ์คลิกของช่องทำเครื่องหมาย ฟังก์ชันตัวจัดการจะตรวจสอบว่ามีออบเจ็กต์ nonUI เป็นพารามิเตอร์ที่สองหรือไม่ (พารามิเตอร์แรกคือเหตุการณ์เสมอ) หากพารามิเตอร์มีอยู่และตั้งค่าเป็นจริงฉันจะเปลี่ยนสถานะที่ถูกตรวจสอบที่รายงาน หากไม่มีการส่งผ่านพารามิเตอร์ดังกล่าว - ซึ่งจะไม่มีหากผู้ใช้เพียงแค่คลิกที่ช่องทำเครื่องหมายใน UI - จากนั้นฉันจะรายงานสถานะที่ตรวจสอบจริง:

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

เวอร์ชัน JSFiddle ที่http://jsfiddle.net/BrownieBoy/h5mDZ/

ฉันได้ทดสอบกับ Chrome, Firefox และ 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

เพื่อให้เข้ากับสถานการณ์แรกนี่คือสิ่งที่ฉันคิดขึ้นมา

http://jsbin.com/uwupa/edit

โดยพื้นฐานแล้วแทนที่จะผูกเหตุการณ์ "คลิก" คุณผูกเหตุการณ์ "เปลี่ยนแปลง" กับการแจ้งเตือน

จากนั้นเมื่อคุณทริกเกอร์เหตุการณ์ให้เริ่มคลิกก่อนจากนั้นจึงทริกเกอร์การเปลี่ยนแปลง

นอกเหนือจากคำตอบของ Nick Craver เพื่อให้ทำงานได้อย่างถูกต้องIE 8คุณต้องเพิ่มตัวจัดการการคลิกเพิ่มเติมในช่องทำเครื่องหมาย:

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

มิฉะนั้นการโทรกลับจะเกิดขึ้นก็ต่อเมื่อช่องทำเครื่องหมายสูญเสียโฟกัสเนื่องจากIE 8จะโฟกัสที่ช่องทำเครื่องหมายและวิทยุเมื่อมีการคลิก

_{ยังไม่ได้รับการทดสอบบนIE 9แม้ว่า}

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

});

วิธีที่เร็วและง่ายที่สุด :

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

$el[0].checked;

$ el - เป็นองค์ประกอบ jquery ของการเลือก

สนุก!

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

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