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

checks_bind();

function checks_bind() {
  $("#x_main").off('click');
  $("#x_main").on('click', function() {
    var obj = $(this);
    var val = obj.is(':checked');
    $("#checks").find("input[type='checkbox']").prop('checked', val);
  })
}