jquery全选复选框不会在单个复选框上触发更改事件

Question

我有一个selectAll 复选框，单击该复选框时，会选中/取消选中类名为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 仅选中/取消选中这些复选框，不会触发此事件处理程序。

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

这里是 jsfiddle 链接：https://jsfiddle.net/92gem6zr/

Answer 1

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

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