jQuery: Seleccionar todas as checkboxes

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.

Artigos relacionados