JSFiddle - React, Tailwind, and code Playground

HTML

<ul class="tree" id="tree">

    <li>
        <input type="checkbox" name="account_settings" value="yes" id="as">Account Settings <!-- AND SHOULD CHECK HERE -->
        <ul>
            <li><input type="checkbox" name="one" value="one" parent="as" id="one"> AS One</li>
            <li><input type="checkbox" name="two" value="two" parent="as"> AS Two</li>
            <li>
                <input type="checkbox" name="user_roles" value="user_roles" parent="as" id="ur"> Users &amp; Roles <!-- SHOULD CHECK HERE -->
                <ul>
                    <li><input type="checkbox" name="user_role" value="add" parent="ur">  Add</li>
                    <li><input type="checkbox" name="user_role" value="delete" parent="ur">  Delete</li> <!-- CHECK HERE -->
                </ul>
            </li>
        </ul>
    </li>

    <li><input type="checkbox" name="rl_module" value="yes">RL Module</li>

    <li>
        <input type="checkbox" name="rl_module" value="yes">Accounting
        <ul>
            <li><input type="checkbox" name="vat" value="yes">VAT</li>
            <li>
                <input type="checkbox" name="bank_account" value="yes">Banking
                <ul>
                    <li><input type="checkbox" name="view" value="yes">View</li>
                    <li><input type="checkbox" name="crud" value="yes">CRUD</li>
                </ul>
            </li>
        </ul>
    </li>

</ul>

JavaScript

$('input[type=checkbox]').click(function () {
    // if is checked
    if (this.checked) {
        
        // check all children
        $(this).parent().find('li input[type=checkbox]').prop('checked', true);
        
        
        
        // check all parents
        $('#' + $(this).attr('parent')).prop('checked', true);
        
    } else {
        
        // uncheck all children
        $(this).parent().find('li input[type=checkbox]').prop('checked', false);
        
    }
    
});