JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
        <li class="main-parent">                                 
        <input class="main-checkbox" type="checkbox" value="id">   
         <ul>
          <li>
           <input class="sub-checkbox" type="checkbox" value="1">
          </li>
          <li>
           <input class="sub-checkbox" type="checkbox" value="2">
          </li>
          <li>
          <input class="sub-checkbox" type="checkbox" value="3">
          </li>
         </ul>
        </li>
       </ul>

JavaScript

$(document).ready(function(){
var allValues = [];
	$('.sub-checkbox').change(function() {
      if(this.checked && allValues.indexOf(this.value) === -1){
      	allValues.push(this.value);
      } else if (!this.checked) {
      	allValues.splice(allValues.indexOf(this.value), 1);
      }
      console.log(allValues);
	}),
  $('.main-checkbox').change(function(){
  	if($('.main-checkbox').is(':checked')){
    	$('.sub-checkbox').prop('checked', true).trigger('change');
    } else {
    	$('.sub-checkbox').prop('checked', false).trigger('change');
    }
  });
});