Este comportamento é útil quando temos um grupo de checkboxes e queremos ter uma maneira fácil para seleccioná-las ou desseleccioná-las todas, por isso fornecemos uma checkbox “seleccionar todas”.
Funciona da seguinte forma:
- Seleccionar a checkbox “seleccionar todas” irá causar que todas as checkboxes sejam seleccionadas.
- Desseleccionar a checkbox “seleccionar todas” irá causar que todas as checkboxes sejam desseleccionadas.
- Ao seleccionar manualmente todas as checkboxes, a checkbox “seleccionar todas” será automaticamente seleccionada.
- Se todas as checkboxes estiverem seleccionadas e uma checkbox for manualmente desseleccionada, a checkbox “seleccionar todas” será automaticamente desseleccionada.
Este comportamento é fácil de replicar com jQuery:
var $selectAll = $(".selectAll"),
$checkboxes = $("input:checkbox");
$selectAll.change(function () {
$checkboxes.prop(
"checked",
$selectAll.prop("checked"));
});
$checkboxes.change(function () {
$selectAll.prop(
"checked",
($checkboxes.length === $checkboxes.filter(":checked").length));
});
No entanto, se tiverem que fazer isto muitas vezes ou para casos mais avançados, recomendo uma solução melhor.
O plugin de jQuery Select All Checkboxes
O plugin de jQuery Select All Checkboxes implementa este comportamento por nós.
O plugin tem várias formas distintas de uso:
// apply select all behavior and target all checkboxes
$(".selectAll").selectAll();
// target specific checkboxes
$(".selectAll").selectAll(".checkbox");
// call on parent container
$(".container").selectAll({
container: true, // specify that we are using it on a container
selectAll: ".selectAll", // the "select all" checkbox selector string
checkbox: ".checkbox" // optionally target specific checkboxes
});
O método do contentor tem a vantagem que irá escutar mudanças dinâmicas no DOM, por isso esta é a forma a seguir se adicionarem checkboxes dinamicamente à página.
Visitem o repositório GitHub para mais informações ou para obter o código fonte.