jQuery, hộp kiểm và .is (“: đã kiểm tra”)

Khi tôi liên kết một hàm với một phần tử hộp kiểm như:

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

Hộp kiểm thay đổi thuộc tính đã kiểm tra của nó trước khi sự kiện được kích hoạt, đây là hành vi bình thường và cho kết quả ngược lại.

Tuy nhiên, khi tôi làm:

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

Hộp kiểm thay đổi thuộc tính đã chọn sau khi sự kiện được kích hoạt.

Câu hỏi của tôi là, có cách nào để kích hoạt sự kiện nhấp chuột từ jQuery giống như một nhấp chuột bình thường sẽ làm (kịch bản đầu tiên) không?

Tái bút: Tôi đã thử với trigger('click');

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

Lưu ý: Trong các phiên bản jquery cũ hơn, bạn có thể sử dụng attr. Bây giờ nó được đề xuất sử dụngprop để đọc trạng thái.

Có một công việc xung quanh hoạt động trong jQuery 1.3.2 và 1.4.2 :

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

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

Nhưng tôi đồng ý, hành vi này có vẻ lỗi so với sự kiện gốc.

Kể từ tháng 6 năm 2016 (sử dụng jquery 2.1.4) không có giải pháp đề xuất nào khác hoạt động. Kiểm tra attr('checked')luôn trả lại undefinedvà is('checked)luôn trả lại false.

Chỉ cần sử dụng phương pháp chống đỡ:

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

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

Tôi vẫn gặp phải hiện tượng này với jQuery 1.7.2. Một giải pháp đơn giản là trì hoãn việc thực thi trình xử lý nhấp chuột với setTimeout và để trình duyệt làm điều kỳ diệu của nó trong thời gian chờ đợi:

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

Nếu bạn đoán trước được hành vi khá không mong muốn này, thì một trong những cách khắc phục đó là chuyển một tham số bổ sung từ jQuery.trigger () đến trình xử lý nhấp chuột của hộp kiểm. Tham số bổ sung này là để thông báo cho trình xử lý nhấp chuột rằng nhấp chuột đã được kích hoạt theo chương trình, chứ không phải bởi người dùng nhấp trực tiếp vào chính hộp kiểm. Sau đó, trình xử lý nhấp chuột của hộp kiểm có thể đảo ngược trạng thái kiểm tra được báo cáo.

Vì vậy, đây là cách tôi kích hoạt sự kiện nhấp chuột trên hộp kiểm có ID "myCheckBox". Lưu ý rằng tôi cũng đang truyền một tham số đối tượng với một thành viên duy nhất, nonUI, được đặt thành true:

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

Và đây là cách tôi xử lý điều đó trong trình xử lý sự kiện nhấp chuột của hộp kiểm. Hàm xử lý kiểm tra sự hiện diện của đối tượng nonUI dưới dạng tham số thứ hai của nó. (Tham số đầu tiên luôn là chính sự kiện.) Nếu tham số hiện diện và được đặt thành true thì tôi sẽ đảo ngược trạng thái .checked đã báo cáo. Nếu không có thông số nào như vậy được chuyển vào - sẽ không có nếu người dùng chỉ cần nhấp vào hộp kiểm trong giao diện người dùng - thì tôi báo cáo trạng thái .checked thực tế:

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

Phiên bản JSFiddle tại http://jsfiddle.net/BrownieBoy/h5mDZ/

Tôi đã thử nghiệm với Chrome, Firefox và 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

Để phù hợp với kịch bản đầu tiên, đây là điều mà tôi đã nghĩ ra.

http://jsbin.com/uwupa/edit

Về cơ bản, thay vì ràng buộc sự kiện "nhấp chuột", bạn ràng buộc sự kiện "thay đổi" với cảnh báo.

Sau đó, khi bạn kích hoạt sự kiện, trước tiên bạn kích hoạt nhấp chuột, sau đó kích hoạt thay đổi.

Ngoài câu trả lời của Nick Craver, để điều này hoạt động bình thường, IE 8bạn cần thêm một trình xử lý nhấp chuột bổ sung vào hộp kiểm:

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

Nếu không, lệnh gọi lại sẽ chỉ được kích hoạt khi hộp kiểm mất tiêu điểm, vì IE 8luôn tập trung vào hộp kiểm và radio khi chúng được nhấp vào.

_{Chưa thử nghiệm trên IE 9mặc dù.}

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

});

Cách nhanh nhất và dễ dàng nhất :

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

$el[0].checked;

$ el - là phần tử jquery của vùng chọn.

Thưởng thức!

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

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