JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>
        <input type="checkbox" id="out1" class="outer">
        <label for="out1">Checkbox Out 1</label>
    </li>
    <ul>
        <li>
            <input type="checkbox" id="inner1" class="inner">
            <label for="out1">Checkbox Inner 1</label>
        </li>
        <li>
            <input type="checkbox" id="inner2" class="inner">
            <label for="out1">Checkbox Inner 2</label>
        </li>
        <li>
            <input type="checkbox" id="inner3" class="inner">
            <label for="out1">Checkbox Inner 3</label>
        </li>
    </ul>
    <li>
        <input type="checkbox" id="out2" class="outer">
        <label for="out1">Checkbox Out 2</label>
    </li>
    <ul>
        <li>
            <input type="checkbox" id="inner4" class="inner">
            <label for="out1">Checkbox Inner 4</label>
        </li>
        <li>
            <input type="checkbox" id="inner5" class="inner">
            <label for="out1">Checkbox Inner 5</label>
        </li>
    </ul>
</ul>

CSS

ul {
  list-style: none;
}

JavaScript

$('.outer').on('click',function(){
                if(this.checked){
                    $('.inner').each(function(){
                        this.checked = true;
                    });
                }else{
                    $('.inner').each(function(){
                        this.checked = false;
                    });
                }
            });

            $('.inner').on('click',function(){
                if ($(this).is(":checked")) {
                    var isAllChecked = 0;

                    $(".inner").each(function() {
                        if (!this.checked)
                            isAllChecked = 1;
                    });

                    if (isAllChecked == 0) {
                        $(".outer").prop("checked", true);
                    }
                }
                else {
                    $(".outer").prop("checked", false);
                }
        });