jquery select 所有复选框都不会触发单个复选框的更改事件

Question

我有一个 selectAll 复选框，单击后 checks/unchecks 所有其他名称为 class 的复选框 all_serp_results_selector。

<p>Select All</p>
<input type="checkbox" id="selectAll">

<p> Individual checkboxes </p>
<input type="checkbox" class="all_serp_results_selector">
<input type="checkbox" class="all_serp_results_selector">
<input type="checkbox" class="all_serp_results_selector">
<input type="checkbox" class="all_serp_results_selector">

Jquery 脚本：

$("#selectAll").on( "click", function(e) {
    $(':checkbox.all_serp_results_selector').prop('checked', this.checked);
});

当这些单独的复选框被更改时，将调用此事件处理程序：

$('.all_serp_results_selector').on('change', function() {
    console.log('changed');
});

但是 selectAll 仅 checks/unchecks 这些复选框并且不会触发此事件处理程序。

如何让 selectAll 也触发每个复选框的更改事件？

这是 jsfiddle link：https://jsfiddle.net/92gem6zr/

Answer 1

change 事件仅在用户更改元素时自动触发，而不是在从代码更改元素时自动触发。您需要明确触发事件。

$("#selectAll").on( "click", function(e) {
    $(':checkbox.all_serp_results_selector').prop('checked', this.checked).change();
});

jquery select 所有复选框都不会触发单个复选框的更改事件

jquery select all checkbox doesn't trigger change event on individual checkbox

javascript

checkbox

jquery

event-handling