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

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();
});