JSFiddle - React, Tailwind, and code Playground
HTML
<ul id="treeList">
<li>
<input type="checkbox" value="C:"> C:
<ul>
<li>
<input type="checkbox" value="C:Users">
Users
</li>
</ul>
</li>
<li>
<label>
<input type="checkbox" value="D:"> D:
</label>
<ul>
<li>
<input type="checkbox" value="D:GDPR">
GDPR
</li>
<li>
<label>
<input type="checkbox" value="D:Nagaraj">
Nagaraj </label>
</li>
<li>
<label>
<input type="checkbox" value="D:Test1">
Test1 </label>
...
JavaScript
$('#treeList :checkbox').change(function (){
$(this).siblings('ul').find(':checkbox').prop('checked', this.checked);
if (this.checked) {
$(this).parentsUntil('#treeList', 'ul').siblings(':checkbox').prop('checked', true);
} else {
$(this).parentsUntil('#treeList', 'ul').each(function(){
var $this = $(this);
var childSelected = $this.find(':checkbox:checked').length;
if (!childSelected) {
$this.prev(':checkbox').prop('checked', false);
}
});
}
});