JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="nested" id="nested">
    <li>
        <input type="checkbox" name="" value="1">
        One
        <ul>
            <li>
                <input type="checkbox" name="" value="1">
                Child 1 of One </li>
            <li>
                <input type="checkbox" name="" value="1">
                Child 2 of One</li>
            <li>
                <input type="checkbox" name="" value="1">
                Child 3 of One
                <ul>
                    <li>
                        <input type="checkbox" name="" value="1">
                        Child 1 of Child 3 of One</li>
                    <li>
                        <input type="checkbox" name="" value="1">
                        Child 2 of Child 3 of One</li>
                </ul>
            </li>
        </ul>
    </li>
    <li>
        <input type="checkbox" name="" value="1">
        Two</li>
    <li>
        <input type="checkbox" name="" value="1">
        Three
        <ul>
            <li>
                <input type="checkbox" name="" value="1">
                Child 1 of Three </li>
            <li>
                <input type="checkbox" name="" value="1">
                Child 2 of Three
                <ul>
            <li>
                <input type="checkbox" name="" value="1">
                Child 1 of Child 2 of Three</li>
            <li>
                <input type="checkbox" name="" value="1">
                Child 2 of Child 2 of Three</li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

JavaScript

$('.nested input[type=checkbox]').click(function () {
    $(this).parent().find('li input[type=checkbox]').prop('checked', $(this).is(':checked'));
    var sibs = false;
    $(this).closest('ul').children('li').each(function () {
        if($('input[type=checkbox]', this).is(':checked')) sibs=true;
    })
    $(this).parents('ul').prev().prop('checked', sibs);
});