JQuery - Sự kiện thay đổi hộp kiểm không phát ra nếu được chọn bằng cách sử dụng JQuery

Question

Tôi có chức năng này Check All kiểm tra tất cả các hộp kiểm. Tôi sử dụng JQuery để làm điều đó.

Nhưng tôi cũng có on change chức năng này mà chuyển đổi một lớp học để div wrapper:

$('input[type="checkbox"]').on('change', function(){ 
    $(this).closest('div').toggleClass('highlight'); 
}); 

Đó hoạt động chạy khi tôi nhấp vào Checkbox, nhưng không nếu tôi bấm Check all.

Có cách nào để tự kích hoạt sự kiện bằng JQuery không? Hoặc là có giải pháp tốt hơn?

Cảm ơn

EDIT:

Dưới đây là mã HTML đơn giản:

<a id="check_all">Check All</a> 
<div> 
    <input type="checkbox" name="cb" value="abc">ABC<br> 
</div> 
<div> 
    <input type="checkbox" name="cb" value="pqr">PQR<br> 
</div> 
<div> 
    <input type="checkbox" name="cb" value="xyz">XYZ<br> 
</div> 

Đây là JSFiddle

http://jsfiddle.net/DarcFiddle/d4VTh/

Answer 1

Sau khi kiểm tra bấm tất cả các bạn nên gọi thay đổi() sự kiện như thế này

$(document).ready(function(){ 
    $("input[type='checkbox']").on('change', function(){ 
     $(this).closest('div').toggleClass('highlight'); 
    }); 

    $("#check_all").on('click', function(){ 
     $("input[type='checkbox']").prop('checked', true).change(); 
    }); 
}); 

Answer 2

Bạn có thể thử này,

$(document).on('change','input[type="checkbox]' ,function(){ 
    // $this will contain a reference to the checkbox 
     var $this = $(this); 
    if ($this.is(':checked')){//To CHECK CHECK BOX IS CHECKED OR NOT 
     $(this).closest('div').toggleClass('highlight'); 
    } 
}); 

hy vọng nó giúp,

Answer 3

này sẽ kích hoạt sự kiện change, nhưng chỉ sau khi bạn bind nó lần đầu tiên.

$('input[type="checkbox]').trigger('change'); 

Answer 4

Gần giống với câu trả lời Visnu, nhưng trực tiếp gọi nhấp chuột() sẽ cháy tất cả các sự kiện nhấp chuột ràng buộc bởi jQuery. Nếu bạn giới thiệu điều này, bạn sẽ thấy nó cũng bỏ chọn các hộp, trong khi câu trả lời của mình chỉ đơn giản là loại bỏ các điểm nổi bật trong khi họ vẫn nhấp vào.

$(document).ready(function(){ 
    $("input[type='checkbox']").on('change', function(){ 
     $(this).closest('div').toggleClass('highlight'); 
    }); 

    $("#check_all").on('click', function(){ 
     $("input[type='checkbox']").click(); 
    }); 
}); 

Answer 5

Kiểm tra sửa đổi fiddle mã này của bạn: http://jsfiddle.net/d4VTh/51/

$(document).ready(function(){ 
    $("input[type='checkbox']").on('change', function(){ 
     if (this.checked) 
      $(this).closest('div').addClass('highlight'); 
     else 
      $(this).closest('div').removeClass('highlight'); 
    }); 

    $("#check_all").on('click', function(){ 
     var item = $("input[type='checkbox']") 
     item.prop('checked', !item.prop('checked')).change(); 
    }); 
});