JSFiddle - React, Tailwind, and code Playground

HTML

<div class="check">
<input type="checkbox" class="all" /> Check/Uncheck all<br />

<input type="checkbox" value="1"/> 1<br />
<input type="checkbox" value="2"/> 2<br />
<input type="checkbox" value="3"/> 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="check">
<input type="checkbox" class="all" /> Check/Uncheck all <br />

<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(){ 
    $('.all').click(function() {
        var $checkboxes = $(this).parent().find('input[type=checkbox]');
        $checkboxes.prop('checked', $(this).is(':checked'));
       console.log( $("input[type='checkbox']").val());
    });     
});