jQuery: Selecionar todos os checkbox de um formulário

Gustavo Paes, 07/12/2010

Vi muitos scripts por ai usando o jQuery para selecionar todos os checkbox quando o usuário clicasse em alguma opção “selecionar todos”. O problema dos códigos era que eles selecionavam todos os checkbox da página. Não faz sentido.

Além do mais, os códigos não eram reutilizáveis, exigindo, por exemplo um id fixo. O código que fiz abaixo serve para qualquer formulário — obviamente tem que seguir um padrão HTML para isso — e seleciona apenas os checkbox que estão no mesmo nível da opção “selecionar todos”.

(function() {
  jQuery(function() {
    // Procura pelos <input type="checkbox" name="_discart"> para adicionar
    // o evento de click
    jQuery("form input[type="checkbox"][name="_discart"]").each(function(i, o) {
      // adiciona um evento
      jQuery(this).click(function() {
        // Define o atributo "checked" dos campos em relação ao checkbox "chave"
        jQuery(this).parent().find("input[type="checkbox"]").attr("checked", this.checked ? "checked" : "");
      });

      // Adiciona nos demais checkbox um evento para quando um deles
      // for selecionado, verificar se o checkbox "chave" deve ser
      // selecionado ou não.
      jQuery(this).parent().find("input[type="checkbox"][name!="_discart"]").click(function() {
        var total_checkbox     = jQuery(this).parent().find("input[type="checkbox"][name!="_discart"]").length;
        var total_selecionados = jQuery(this).parent().find("input[type="checkbox"][name!="_discart"]:checked").length
        jQuery(this).parent().find("input[type="checkbox"][name="_discart"]").attr("checked", total_checkbox == total_selecionados ? "checked" : "");
      });
    }); // END each
  })
})();

Adaptando o formulário para funcionar

Para o script funcionar ele precisa de duas coisas básicas:

  1. Os checkbox que pertencem a um mesmo grupo devem estar dentro de um div ou elemento qualquer;
  2. O checkbox “selecionar todos” precisa ter o atributo name="_discart".
<form name="formulario1">
  <div>
    <label for="form1:name">Nome: </label>
    <input type="text" name="form1:name" id="form1:name" />
  </div>
  <div>
    <label>Opções</label>
    <input type="checkbox" name="opcoes[]" value="opção 1" /> Opção 1
    <input type="checkbox" name="opcoes[]" value="opção 2" /> Opção 2
    <input type="checkbox" name="opcoes[]" value="opção 3" /> Opção 3
    <input type="checkbox" name="opcoes[]" value="opção 4" /> Opção 4
    <input type="checkbox" name="_discart" value="" /> Todas as opções
  </div>
</form>

Seguindo essa padronização, o script deve funcionar sem problemas.