JSFiddle - React, Tailwind, and code Playground

by TheFiddler

HTML

<input type="checkbox" class="all" /> Check/Uncheck all
<div class="check">
<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>
<input type="checkbox" class="all" /> Check/Uncheck all
<div class="check">
<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').toggle(
    function() {
    $('.check').find('input[type=checkbox]').attr('checked', true);
        },
    function() {
    $('.check').find('input[type=checkbox]').attr('checked', false);
        });
       
        
});