How can I simplify these checkbox onClicks? I know there is a way to simplify these checkbox onClick functions.  I'm just not sure how to make it happen.
Upon checking the checkAllProfiles checkbox, all of the profileCheckboxes are checked:
$('#checkAllProfiles').on('click', function()
{
  $(&quot;.profileCheckbox&quot;).prop('checked', $(this).prop('checked'));
});

Then, if one of the profileCheckboxes are checked, it unchecks the checkAllProfiles checkbox:
$(&quot;.profileCheckbox&quot;).on('click', function()
{
  $(&quot;.checkAllProfiles&quot;).prop(&quot;checked&quot;, false );
});

Now here is another set of checkboxes that require the same functionality:
$('#checkAllRegions').on('click', function()
{
  $('.regionCheckbox').prop('checked', $(this).prop('checked'));
});

$(&quot;.regionCheckbox&quot;).on('click', function()
{
  $(&quot;.checkAllRegions&quot;).prop(&quot;checked&quot;, false );
});

I want to be able to simplify this code.  How can I do it?
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;