JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li class="group">
    <input type="checkbox" data-parent> 1
    <ul>
      <li><input type="checkbox" data-children> 1.1</li>
      <li><input type="checkbox" data-children> 1.2</li>
      <li><input type="checkbox" data-children> 1.3</li>
      <li><input type="checkbox" data-children> 1.4</li>
    </ul>
   </li>
  <li class="group">
    <input type="checkbox" data-parent> 2
    <ul>
      <li><input type="checkbox" data-children> 2.1</li>
      <li><input type="checkbox" data-children> 2.2</li>
      <li><input type="checkbox" data-children> 2.3</li>
      <li><input type="checkbox" data-children> 2.4</li>
    </ul>
   </li>
</ul>

JavaScript

$('input[data-children]').change(function() {
	var t = $(this).parents('.group');
	var p = t.find('[data-parent]');
	if ( $(this).prop('checked') == true ) {
		p.prop('checked',true);
  } else if ( t.find('[data-children]:checked').length == 0 ) {
  	p.prop('checked',false);
  }
});
$('input[data-parent]').change(function() {
	var t = $(this).parents('.group');
  var p = t.find('[data-children]');
	if ( $(this).prop('checked') == true ) {
		p.prop('checked',true);
  } else {
  	p.prop('checked',false);
  }
});