JSFiddle - React, Tailwind, and code Playground

by TheFiddler

HTML

<div class="checkbox-wrapper">
    <div><input type="checkbox" class="toggle-all" /> Check/Uncheck all</div>

<input type="checkbox" /> 1<br />
<input type="checkbox" /> 2<br />
<input type="checkbox" /> 3<br />
<input type="checkbox" /> 4<br />
<input type="checkbox" /> 5<br />
<input type="checkbox" /> 6<br />
<input type="checkbox" /> 7
</div>

<br><br>
<div class="checkbox-wrapper">
    <div><input type="checkbox" class="toggle-all" /> Check/Uncheck all</div>

<input type="checkbox" /> 1<br />
<input type="checkbox" /> 2<br />
<input type="checkbox" /> 3<br />
<input type="checkbox" /> 4<br />
<input type="checkbox" /> 5<br />
<input type="checkbox" /> 6<br />
<input type="checkbox" /> 7
</div>

JavaScript

$(document).ready(function(){ 
    $('.toggle-all').click(function() {
        var $checkboxes = $(this).parents('.checkbox-wrapper').find('input[type=checkbox]');
        $checkboxes.prop('checked', $(this).is(':checked') ? true : false);
    });     
});