JSFiddle - React, Tailwind, and code Playground

HTML

<label for="business">
    <input type="checkbox" id="business">Business</label>
<div id="businesslist">
    <ul style="list-style: none;">
        <li>
            <label for="chk1">
                <input type="checkbox" name="chk1" id="chk1" class="sub" />First</label>
        </li>
        <li>
            <label for="chk2">
                <input type="checkbox" name="chk2" id="chk2" class="sub" />Second</label>
        </li>
        <li>
            <label for="chk3">
                <input type="checkbox" name="chk3" id="chk3" class="sub" />Third</label>
        </li>
        <li>
            <label for="chk4">
                <input type="checkbox" name="chk4" id="chk4" class="sub" />Fourth</label>
        </li>
        <li>
            <label for="chk5">
                <input type="checkbox" name="chk5" id="chk5" class="sub" />Fifth</label>
        </li>
        <li>
            <label for="chk6">
                <input type="checkbox" name="chk6" id="chk6" class="sub" />Sixth</label>
        </li>
        <li>
            <label for="chk7">
                <input type="checkbox" name="chk7" id="chk7" class="sub" />Seventh</label>
        </li>
    </ul>
</div>

JavaScript

$('#business:checkbox').change(function () {
    if ($('#business:checkbox').attr("checked")) $('.sub').attr('checked', 'checked');
    else $('.sub').removeAttr('checked');
});