1

Como selecionar todos os checkbox de cada grupo?

Tem que ser feito uma função para cada botão ou tem uma forma correta para fazer isso?

$('#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[]" />

2 Respostas 2

2

Uma das formas mais simples e versáteis de se fazer isso é criar uma propriedade data-* no link de selecionar todos correspondente ao grupo.

Por exemplo:

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

Selecionaria todos os inputs que tivessem a classe group-b, por exemplo:

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

Assim:

$('[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" />

Você pode inclusive fazer um recurso que te permite fazer um 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" />


O benefício dessa abordagem é evidente: você evita a repetição de código desnecessária.

0

Simplificando, você pode selecionar todos os checkbox através da classe deles, assim:

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .