JSFiddle - React, Tailwind, and code Playground

HTML

<table>
    <tbody>
        <tr class="ui-grid groupHead">
            <td>
                <input type="checkbox" class="groupHeadCheck" />
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" id="1" />
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" id="2" />
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" id="3" />
            </td>
        </tr>
        <tr class="ui-grid groupHead">
            <td>
                <input type="checkbox" class="groupHeadCheck" />
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" id="4" />
            </td>
        </tr>
        <tr class="ui-grid groupHead">
            <td>
                <input type="checkbox" class="groupHeadCheck" />
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" id="5" checked="checked" />
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" id="6" checked="checked" />
            </td>
        </tr>
        <tr>
            <td>
                <input type="checkbox" id="7" checked="checked"/>
            </td>
        </tr>        
    </tbody>
</table>

CSS

.groupHead td { background-color: #CCC; }

JavaScript

$("table tbody").on("change", "input[type=checkbox]", function (e) { 
    var currentCB = $(this);
    var isChecked = this.checked;
    if (currentCB.is(".groupHeadCheck")) {
        var allCbs = currentCB.closest('tr').nextUntil('tr.groupHead').find('[type="checkbox"]').prop('checked', isChecked);
    } else {
        var allCbs = currentCB.closest('tr').prevAll("tr.groupHead:first").nextUntil('tr.groupHead').andSelf().find('[type="checkbox"]');
        var allSlaves = allCbs.not(".groupHeadCheck");
        var master = allCbs.filter(".groupHeadCheck");
        var allChecked;
        if (!isChecked) {
            allChecked = false;
        } else {
            allChecked = allSlaves.filter(":checked").length === allSlaves.length;
        }
        master.prop("checked", allChecked);
    }
});

$(".groupHead").next().find("[type=checkbox]").change();