JSFiddle - React, Tailwind, and code Playground

HTML

<input id='x_main' type='checkbox'/>Main<br>
<p>--------------------------------</p>
<div id='checks'>
    <input type='checkbox'/>1<br>
    <input type='checkbox'/>2<br>
</div>
<p>--------------------------------</p>
<i>1 - Click on 1 or 2 <br>2 - Try <b>Main</b> checkbox. <br>
3 - Main checkbox isn't working</i>

JavaScript

$(function(){
	$("#x_main").on("change", function(){
  	$("#checks").find("input[type='checkbox']").attr("checked",$(this).is(":checked"));
  });
  
  $("#checks input[type='checkbox']").on("change", function(){
      $("#x_main").attr("checked",$("#checks input[type='checkbox']").length == $("#checks input[type='checkbox']:checked").length);
  });
});