How can I simplify these checkbox onClicks?

Question

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()
{
 $(".profileCheckbox").prop('checked', $(this).prop('checked'));
});

Then, if one of the profileCheckboxes are checked, it unchecks the checkAllProfiles checkbox:

$(".profileCheckbox").on('click', function()
{
 $(".checkAllProfiles").prop("checked", false );
});

Now here is another set of checkboxes that require the same functionality:

$('#checkAllRegions').on('click', function()
{
 $('.regionCheckbox').prop('checked', $(this).prop('checked'));
});
$(".regionCheckbox").on('click', function()
{
 $(".checkAllRegions").prop("checked", false );
});

I want to be able to simplify this code. How can I do it?

Answer 1

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);
 });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input data-group="g1" type="checkbox" name="X" value="1">
<input data-group="g1" type="checkbox" name="X" value="2">
<input data-group="g1" type="checkbox" name="X" value="3"><br>
<input data-group="g1" id="g1checkall" type="checkbox" class="checkall" name="X"> <label for="g1checkall">Check All</label>
<hr>
<input data-group="g2" type="checkbox" name="X2" value="1">
<input data-group="g2" type="checkbox" name="X2" value="2">
<input data-group="g2" type="checkbox" name="X2" value="3"><br>
<input id="g2checkall" data-group="g2" type="checkbox" class="checkall" name="X2"> <label for="g2checkall">Check All</label>

Answer 2

What about define the class of the checkboxes targets in a dataset attribute and every time you change this element, you change the elements with that class.

You can define this behavior in a class, so, everytime you want to do this, you only need to pass the checkboxes class and add the class which you added the event listener instead of repeat the same piece of JavaScript

$('.checker').on('change', function() {
 $("." + $(this).attr('data-checkbox')).prop('checked', $(this).prop('checked'));
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Regions
<input type="checkbox" id="checkAllRegions" data-checkbox="regionCheckbox" class="checker"/>
<input type="checkbox" class="regionCheckbox" />
<input type="checkbox" class="regionCheckbox" />
<input type="checkbox" class="regionCheckbox" />
<input type="checkbox" class="regionCheckbox" />
Profiles
<input type="checkbox" id="checkAllProfiles" data-checkbox="profileCheckbox" class="checker"/>
<input type="checkbox" class="profileCheckbox" />
<input type="checkbox" class="profileCheckbox" />
<input type="checkbox" class="profileCheckbox" />
<input type="checkbox" class="profileCheckbox" />
foo
<input type="checkbox" data-checkbox="bar" class="checker"/>
<input type="checkbox" class="bar" />
<input type="checkbox" class="bar" />
<input type="checkbox" class="bar" />
<input type="checkbox" class="bar" />