How can I simplify these checkbox onClicks?
One way to simplify this is you can use a data attribute to group them together with the check all option.
This will allow you to add as many as groups as you want while reusing the same jquery.
Also, you will want to use change and not click as click will be triggered when someone clicks on the radio even if its the same one, but change will only be triggered when a different one is selected by the user.


$(document).ready(function(){
  $(".checkall").on("change",function(){
    $("[data-group=" + $(this).data("group") + "]").prop('checked', $(this).prop('checked'));
  });
  
  $("input[type=checkbox]:not(.checkall)").on("change",function(){
     $("[data-group=" + $(this).data("group") + "].checkall").prop('checked', false);
  });
});
&lt;script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;input data-group="g1" type="checkbox" name="X" value="1"&gt;
&lt;input data-group="g1" type="checkbox" name="X" value="2"&gt;
&lt;input data-group="g1" type="checkbox" name="X" value="3"&gt;&lt;br&gt;
&lt;input data-group="g1" id="g1checkall" type="checkbox" class="checkall" name="X"&gt; &lt;label for="g1checkall"&gt;Check All&lt;/label&gt;
&lt;hr&gt;

&lt;input data-group="g2" type="checkbox" name="X2" value="1"&gt;
&lt;input data-group="g2" type="checkbox" name="X2" value="2"&gt;
&lt;input data-group="g2" type="checkbox" name="X2" value="3"&gt;&lt;br&gt;
&lt;input id="g2checkall" data-group="g2" type="checkbox" class="checkall" name="X2"&gt; &lt;label for="g2checkall"&gt;Check All&lt;/label&gt;