JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<ul>
    <li>
        <input type="checkbox" name="all">
        <label for="">All</label>
        <ul>
            <li>
                <label>
                    <input type="checkbox" value="input1" class="childInput">input 1</label>
            </li>
            <li>
                <label>
                    <input type="checkbox" value="input2" class="childInput">input 2</label>
            </li>
            <li>
                <label>
                    <input type="checkbox" value="input3" class="childInput">input 3</label>
            </li>
            <li>
                <label>
                    <input type="checkbox" value="input4" class="childInput">input 4</label>
            </li>
            <li>
                <label>
                    <input type="checkbox" value="input5" class="childInput">input 5</label>
            </li>
        </ul>
    </li>
</ul>

CSS

li {
    border: 2px solid transparent;
    margin-bottom: 0.2em;
}
.checked {
    border-color: limegreen
}

JavaScript

var childInputs = $('input[type=checkbox].childInput');

function changeHandler() {
    $(this).closest('li').toggleClass('checked', this.checked);
    
    var check = childInputs.length == childInputs.filter(':checked').length;
    $('input[name=all]').prop('checked', check);
}

childInputs.on('change', changeHandler);

$('input[name=all]').on('change', function () {
    childInputs.prop('checked', this.checked).change();
});