JSFiddle - React, Tailwind, and code Playground

HTML

<table style="white-space: nowrap">
    <tbody>
        <tr>
            <td style="width: 10em; vertical-align: top;"> <span class="showStatewide"><input id="ctl00_BodyCPH_AnnouncementEditControl1_CB_ShowStatewide" type="checkbox" name="CB_ShowStatewide"></span><span></span>

                <label for="ctl00_BodyCPH_AnnouncementEditControl1_CB_ShowStatewide" id="ctl00_BodyCPH_AnnouncementEditControl1_Label1">Master</label>
            </td>
            <td>
                <div> <span class="showRegion"><input id="ctl00_DistributionCb" type="checkbox" name="ctl00$DistributionCb"><label for="ctl00_DistributionCb">Checkbox 1</label></span><span></span>

                </div>
                <div> <span class="showRegion"><input id="ctl01_DistributionCb" type="checkbox" name="ctl01$DistributionCb"><label for="ctl01_DistributionCb">Checkbox 2</label></span><span></span>

                </div>
                <div> <span class="showRegion"><input id="ctl02_DistributionCb" type="checkbox" name="ctl02$DistributionCb"><label for="ctl02_DistributionCb">Checkbox 3</label></span><span></span>

                </div>
                <div> <span class="showRegion"><input id="ctl03_DistributionCb" type="checkbox" name="ctl03$DistributionCb"><label for="ctl03_DistributionCb">Checkbox 4</label></span><span></span>

                </div>
                <div> <span class="showRegion"><input id="ctl04_DistributionCb" type="checkbox" name="ctl04$DistributionCb"><label for="ctl04_DistributionCb">Checkbox 5</label></span><span></span>

                </div>
                <div> <span class="showRegion"><input id="ctl05_DistributionCb" type="checkbox" name="ctl05$DistributionCb"><label for="ctl05_DistributionCb">Checkbox 6</label></span><span></span>

                </div> <span id="ctl00_BodyCPH_AnnouncementEditControl1_cstvCBRegionList" style="color:Red;visibility:hidden;">!</span>

            </td>
        </tr>
    </tbody>
</table>

JavaScript

// tri-state checkbox logic on Select All
            $(document).ready(function () {
                var stateWideCb = $('.showStatewide input');
                stateWideCb.change(function () {
                    var b = $(this).is(':checked');
                    $('.showRegion input').attr('checked', b);
                });
                $('.showRegion input').change(function () {
                    if ($('.showRegion input:checked').length === 0) {
                        stateWideCb.prop("indeterminate", false)
                            .attr('checked', false);
                    } else if ($('.showRegion input:not(:checked)').length === 0) {
                        stateWideCb.prop("indeterminate", false)
                            .attr('checked', true);
                    } else {
                        stateWideCb.prop("indeterminate", true);
                    }
                });
                // do initial check to see if statewide should be tristate or not
                // this code is primarily used during postback with validation errors.
                // otherwise the normal eventing code works fine.
                var d = $('.showRegion input:checked').length;
                var d1 = $('.showRegion input:not(:checked)').length;
                if (d > 0 && d1 > 0) {
                    stateWideCb.prop("indeterminate", true)
                        .attr('checked', false);
                }
            });