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[]" />