JSFiddle - React, Tailwind, and code Playground

by BhaveshKachhadiya

HTML

<fieldset class="floral">
        <ul>
            <li>
                <input type="checkbox" class="familybox cbox"/>
                Level 1
                <ul>
                    <li>
                        <input type="checkbox" class="cbox mainoption"/>
                        Level 2 
                        <ul class="suboption">
                            <li>
                                <input type="checkbox" class="cbox"/>
                                Level 3</li>
                            <li>
                                <input type="checkbox" class="cbox"/>
                                Level 3</li>
                        </ul>
                    </li>
                    <li>
                        <input type="checkbox" class="cbox mainoption"/>
                        Level 2
                        <ul class="suboption">
                            <li>
                                <input type="checkbox" class="cbox"/>
                                Level 3</li>
                            <li>
                                <input type="checkbox" class="cbox"/>
                                Level 3</li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </fieldset>

CSS

ul li {padding: 0 0 0 20px;}

JavaScript

$(document).ready(function () {
            $.extend($.expr[':'], {
                unchecked: function (obj) {
                    return ((obj.type == 'checkbox' || obj.type == 'radio') && !$(obj).is(':checked'));
                }
            });

            $(".floral input:checkbox").live('change', function () {
                $(this).next('ul').find('input:checkbox').prop('checked', $(this).prop("checked"));

                for (var i = $('.floral').find('ul').length - 1; i >= 0; i--) {
                    $('.floral').find('ul:eq(' + i + ')').prev('input:checkbox').prop('checked', function () {
                        return $(this).next('ul').find('input:unchecked').length === 0 ? true : false;
                    });
                }
            });
        });