mardi 24 novembre 2020

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

I have a selectAll checkbox that, when clicked, checks/unchecks all other checkboxes with class name 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 scripts:

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

When these individual checkboxes are changed, this event handler is called:

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

But selectAll only checks/unchecks these checkboxes and doesn't trigger this event handler.

How can I make selectAll to also trigger change event for each individual checkboxes?

Here's jsfiddle link: https://jsfiddle.net/92gem6zr/




Aucun commentaire:

Enregistrer un commentaire