JSFiddle - React, Tailwind, and code Playground

by thecodeparadox

HTML

<ul>
    <li>
        <label for="category_125" class="checkbox">
        <input type="checkbox" checked="checked" name="categories[]" value="125" id="category_125">Clothing</label>
        <ul>
            <li>
                <label for="category_126" class="checkbox">
                <input type="checkbox" name="categories[]" value="126" id="category_126">Denim</label>
                <ul>
                    <li>
                        <label for="category_127" class="checkbox">
                        <input type="checkbox" checked="checked" name="categories[]" value="127" id="category_127">Jeans</label>
                    </li>
                </ul>
            </li>
        </ul>
        <ul>
            <li>
                <label for="category_144" class="checkbox">
                <input type="checkbox" name="categories[]" value="144" id="category_144">Trousers</label>
                <ul>
                    <li>
                        <label for="category_146" class="checkbox">
                        <input type="checkbox" name="categories[]" value="146" id="category_146">Bermudas</label>
                    </li>
                </ul>
            </li>
        </ul>
        <ul>
            <li>
                <label for="category_152" class="checkbox">
                <input type="checkbox" name="categories[]" value="152" id="category_152">Sweaters</label>
                <ul>
                    <li>
                        <label for="category_154" class="checkbox">
                        <input type="checkbox" name="categories[]" value="154" id="category_154">Sweaters</label>
                    </li>
                    <li>
                        <label for="category_155" class="checkbox">
                        <input type="checkbox" name="categories[]" value="155" id="category_155">Sweaters 2</label>
                    </li>
                    <li>
                        <label for="category_156" class="checkbox">
                 ...

JavaScript

$(":checkbox").on("change", function() {
    var $this = $(this);
    var checked = $this.prop("checked");
    if (!checked) {
        $this.parent().siblings("ul").find(":checkbox:checked").prop("checked", false);
    }

    if ($this.closest("ul").find(":checkbox:checked").not(this).length == 0) {
        $this.parents("ul").each(function() {
            if ($(this).siblings("ul").find(":checkbox:checked").length == 0) {
                $(this).siblings("label").children().prop("checked", checked);
            }
        });
    }
});