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() {
	if ( $(this).prop('checked') == true ) {
		$(this).parents('.group').find('[data-parent]').prop('checked',true);
  }
});