JSFiddle - React, Tailwind, and code Playground

by masteram

HTML

<form id="boxes">
    <input type="checkbox" id="all" name="all" />
    <input type="checkbox" name="multi_mag[]" class="normal" />
    <input type="checkbox" name="multi_mag[]" class="normal" />
    <input type="checkbox" name="multi_mag[]" class="normal" />
    <input type="checkbox" name="multi_mag[]" class="normal" />
    <input type="checkbox" name="multi_mag[]" class="normal" />
    <input type="checkbox" name="multi_mag[]" class="normal" />
    <input type="checkbox" name="multi_mag[]" class="normal" />
    <input type="checkbox" name="multi_mag[]" class="normal" />
</form>

CSS

#all {
    display:block;
}

JavaScript

$('#boxes').delegate('.normal', 'change', function (e) {
        console.log('changed', e.target.checked);
    });
    
    $('#all').change(function (e) {
        var checked = e.target.checked;
        console.log('changed checkall box: ', checked);
        checkboxes = document.getElementsByName('multi_mag[]');
        for (var i = 0, n = checkboxes.length; i < n; i++) {
            checkboxes[i].checked = checked;
            $(checkboxes[i]).change();
        }
    });