Select all checkbox separated by groups

Question

How to select all checkboxes for each group?

A function has to be done for each button or has a correct way to do this?

$('#select-all-A').click(function(event) {   
    if(this.checked) {
        $(':checkbox').each(function() {
            this.checked = true;                        
        });
    } else {
        $(':checkbox').each(function() {
            this.checked = false;                       
        });
    }
});

$('#select-all-B').click(function(event) {   
    if(this.checked) {
        $(':checkbox').each(function() {
            this.checked = true;                        
        });
    } else {
        $(':checkbox').each(function() {
            this.checked = false;                       
        });
    }
});

$('#select-all-C').click(function(event) {   
    if(this.checked) {
        $(':checkbox').each(function() {
            this.checked = true;                        
        });
    } else {
        $(':checkbox').each(function() {
            this.checked = false;                       
        });
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

[<a href="#" id="select-all-A">Todos</a>]

<input class="grupoA" type="checkbox" name="permisao[]" />
<input class="grupoA" type="checkbox" name="permisao[]" />
<input class="grupoA" type="checkbox" name="permisao[]" />

<p>=================================</p>


[<a href="#" id="select-all-B">Todos</a>]

<input class="grupoB" type="checkbox" name="permisao[]" />
<input class="grupoB" type="checkbox" name="permisao[]" />
<input class="grupoB" type="checkbox" name="permisao[]" />


<p>=================================</p>


[<a href="#" id="select-all-C">Todos</a>]

<input class="grupoC" type="checkbox" name="permisao[]" />
<input class="grupoC" type="checkbox" name="permisao[]" />
<input class="grupoC" type="checkbox" name="permisao[]" />

Answer 1

One of the simplest and most versatile ways to do this is to create a property data-* in the link to select all corresponding to the group.

For example:

<button data-select-all="group-b">Selecionar Todos (B)</button>

Would select all the inputthose who had the class group-b, for example:

<input type="checkbox" class="group-b" />

Thus:

$('[data-select-all]').on('click', function() {
  const target = $(this).data('select-all');
  $(`input[type="checkbox"].${target}`).prop('checked', true);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button data-select-all="group-a">Selecionar (A)</button>
<input type="checkbox" class="group-a" />
<input type="checkbox" class="group-a" />
<input type="checkbox" class="group-a" />

<hr />

<button data-select-all="group-b">Selecionar (B)</button>
<input type="checkbox" class="group-b" />
<input type="checkbox" class="group-b" />
<input type="checkbox" class="group-b" />

<hr />

<button data-select-all="group-c">Selecionar (C)</button>
<input type="checkbox" class="group-c" />
<input type="checkbox" class="group-c" />
<input type="checkbox" class="group-c" />

You can even make a feature that allows you to make one toggle:

$('[data-select-all]').on('click', function() {
  $(this).toggleClass('has-selected-all');

  const target = $(this).data('select-all');
  
  $(`input[type="checkbox"].${target}`).prop(
    'checked',
    $(this).is('.has-selected-all')
  );
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<button data-select-all="group-a">Selecionar (A)</button>
<input type="checkbox" class="group-a" />
<input type="checkbox" class="group-a" />
<input type="checkbox" class="group-a" />

<hr />

<button data-select-all="group-b">Selecionar (B)</button>
<input type="checkbox" class="group-b" />
<input type="checkbox" class="group-b" />
<input type="checkbox" class="group-b" />

<hr />

<button data-select-all="group-c">Selecionar (C)</button>
<input type="checkbox" class="group-c" />
<input type="checkbox" class="group-c" />
<input type="checkbox" class="group-c" />

---

The benefit of this approach is evident: you avoid unnecessary code repetition.

Answer 2

Simply put, you can select all checkboxes through their class, thus:

$('#select-all-A').click(function(event) {  
  if(!$('.grupoA').prop("checked")){
    $('.grupoA').prop("checked",true);
  }else{
    $('.grupoA').prop("checked",false);
  }
});