JSFiddle - React, Tailwind, and code Playground

by sQVe

HTML

<ul>
    <li>
        Country
        <ul>
            <input type="checkbox" id="selectAll1" class="select">Select/Deselect All Country
            <li>
                <input id="modalEntity1" class="entity" type="checkbox" value="group1" name="India">India
                <input id="modalEntity2" class="entity" type="checkbox" value="group1" name="UAE">UAE
            </li>
        </ul>
    </li>
    <li>
        Company
        <ul>
            <input type="checkbox" id="selectAll2" class='select'>Select/Deselect All Company</a>
            <li>
                <input id="modalEntity3" class="entity" type="checkbox" value="group2" name="Apple">Apple
                <input id="modalEntity4" class="entity" type="checkbox" value="group2" name="Google">Google
            </li>
        </ul>
    </li>
</ul>

JavaScript

$(document).ready(function() {
    "use strict";
    $("input.select").on("click", function() {
        $(this).siblings().find("input.entity").prop("checked", $(this).is(":checked"));
    });

    $("input.entity").on("click", function() {
        var $entityGroup = $(this).siblings().andSelf();
        $(this).parent().siblings("input.select").prop("checked", $entityGroup.length === $entityGroup.filter(":checked").length);
    });
});