JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.5.1.js" integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc=" crossorigin="anonymous"></script>

Select All

<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">

JavaScript

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