JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox" class="first" />
<input type="checkbox" class="first" checked />
<input type="checkbox" class="first" />

<label><input type="checkbox" class="select-all-first" /> Select all first</label>

<input type="checkbox" class="second" />
<input type="checkbox" class="second" checked />
<input type="checkbox" class="second" />

<label><input type="checkbox" class="select-all-second" /> Select all second</label>

CSS

input, label { display: block; }
label input { display: inline; }

JavaScript

$('.select-all-first').on('change', function(){
    if ($(this).is(':checked'))
        $('.first').prop('checked', true);
    else
        $('.first').prop('checked', false);
});

$('.select-all-second').on('change', function(){
    if ($(this).is(':checked'))
        $('.second').each(function(){
            this.checked = true;
        });
    else
        $('.second').removeAttr('checked');
});