JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
    <li>
        <label for="tall">
          <input type="checkbox" name="tall" id="tall">Tall Things
        </label>
        <ul>
        <li>
          <label for="tall-2-1">
            <input type="checkbox" name="tall-2-1" id="tall-2-1">Andre
          </label>

          </li>
          <li>
            <label for="tall-2-2">
              <input type="checkbox" name="tall-2-2" id="tall-2-2">Paul Bunyan
            </label>
          </li>
           
        </ul>
    </li>
</ul>

CSS

ul {
    padding: 0;
}

ul ul {
    padding: 0 20px;
}

JavaScript

$('input[type="checkbox"]').change(function(e) {
    var checked = $(this).prop("checked"),
        container = $(this).parent().parent(),
        siblings = container.siblings();
    console.log(container);
    container.find('input[type="checkbox"]').prop({
        indeterminate: false,
        checked: checked
    });

    function checkSiblings(el) {
        var parent = el.parent().parent(),
            all = true;

        el.siblings().each(function() {
            return all = ($(this).children('input[type="checkbox"]').prop("checked") === checked);
        });

        if (all && checked) {
            parent.children('input[type="checkbox"]').prop({
                indeterminate: false,
                checked: checked
            });
            checkSiblings(parent);
        } else if (all && !checked) {
            parent.children('input[type="checkbox"]').prop("checked", checked);
            parent.children('input[type="checkbox"]').prop("indeterminate", (parent.find('input[type="checkbox"]:checked').length > 0));
            checkSiblings(parent);
        } else {
            el.parents("li").children('input[type="checkbox"]').prop({
                indeterminate: true,
                checked: false
            });
        }
    }

    checkSiblings(container);
});