JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
<li>
Country
<ul>
<input type="checkbox" class="selectAll" data-group="group1">Select/Deselect All Country
<li>
<input class="entity" type="checkbox" value="group1" name="India">India
<input class="entity" type="checkbox" value="group1" name="UAE">UAE
</li>
</ul>
</li>
<li>
Company
<ul>
<input type="checkbox" class='selectAll' data-group="group2">Select/Deselect All Company</a>
<li>
<input class="entity" type="checkbox" value="group2" name="Apple">Apple
<input class="entity" type="checkbox" value="group2" name="Google">Google
</li>
</ul>
</li>
</ul>

JavaScript

$(function(){
  $('.selectAll').on('click', function(evt){
    var group = $(this).attr('data-group'),
        isChecked = !!($(this).prop('checked'));
    $('input[value="' + group + '"]').prop('checked', isChecked);    
  })
  
  $('.entity').on('click', function(evt){
    var group = $(this).attr('value'),
        siblings = $('input[value="' + group + '"]'),
        isChecked = true;
    siblings.each(function(idx, el){
      if(!$(el).prop('checked')) {
        isChecked = false;
        return;
      }
    })
    
    $('.selectAll[data-group="' + group + '"]').prop('checked', isChecked);
    
  })
})