JSFiddle - React, Tailwind, and code Playground

HTML

<input type="button" id="checkAll" name="dummy" value="dummy" /> <label for="checkAll">Check All</label><br />

<input type="checkbox" name="dummy" value="dummy" />
<input type="checkbox" name="dummy" value="dummy" />
<input type="checkbox" name="dummy" value="dummy" />
<input type="checkbox" name="dummy" value="dummy" />

JavaScript

$('#checkAll').click(function() {
    if(this.checked) {
        $('input:checkbox').attr('checked', true);
    }
    else {
        $('input:checkbox').removeAttr('checked');
    }
});

$('input:checkbox:not(#checkAll)').click(function() {
    if(!this.checked) {
        $('#checkAll').removeAttr('checked');
    }
    else {
        var numChecked = $('input:checkbox:checked:not(#checkAll)').length;
        var numTotal = $('input:checkbox:not(#checkAll)').length;
        if(numTotal == numChecked) {
            $('#checkAll').attr('checked', true);
        }
    }
});