JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="tree">
    <li>
        <label>Root</label>
        <ul>
            <li>
                <label><input type="checkbox" class="categorycheckbox">Group 1</label>
                <ul>
                    <li>
                        <label><input type="checkbox" class="productcheckbox">Item 1</label>
                    </li>
                    <li>
                        <label><input type="checkbox" class="productcheckbox">Item 2</label>
                    </li>
                    <li>
                        <label><input type="checkbox" class="productcheckbox">Item 3</label>
                    </li>
                </ul>
            </li>
            <li>
                <label><input type="checkbox" class="categorycheckbox">Group 2</label>
                <ul>
                    <li>
                        <label><input type="checkbox" class="productcheckbox">Item 4</label>
                    </li>
                    <li>
                        <label><input type="checkbox" class="productcheckbox">Item 5</label>
                    </li>
                    <li>
                        <label><input type="checkbox" class="productcheckbox">Item 6</label>
                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

CSS

body {
    font: 14px monospace;
}

ul {
    list-style: none;
}

JavaScript

var updateCheckedState = function () {
    var list = $(this).closest("li").find("ul");
    $(".productcheckbox", list).prop("checked", this.checked);
};

$(".categorycheckbox").change(updateCheckedState);