Selecionar/Desmarcar todos – plugin jQuery [atualizado]

Ja fiz isso váaarias vezes, o famoso “marcar/desmarcar todos” com checkboxes, para (por exemplo) excluir ou editar vários resultados de uma vez.

Para facilitar minha vida e não ter que fazer isso toda vez, resolvi criar um plugin para o jQuery. O plugin é bem simples, o principal objetivo mesmo era “não gastar tempo” fazendo isso.

Como utilizar?

No exemplo abaixo, eu coloquei o name do meu checkbox principal (o que irá selecionar todos) de “selecionarTodos”. Todos os checks que serão selecionados terão o name “selecionar[]” (você pode utilizar o name que quiser).

<script type=”text/javascript”>
$(function(){
$(“input[name='selecionarTodos']“).selecionall({
“btnPrincipal”:”#btn-principal”, //botão
“btnLabel”:”Editar %n% selecionado%p%?”, //label do botao – %p% = plural , %n% numero de checks selecionados
“checkPrincipal”:”#selecionarTodos”, //principal check – o que ira selecionar todos
“checksSelecionar”:”selecionar[]“, //checks que serao selecionados
“defaultLabel”:”Selecione” //default label para o botao – caso nenhum check seja selecionado
});
});
</script>

Parametros

Selecionando o botão

“btnPrincipal”:”#btn-principal”

Botão que será habilitado/desabilitado caso algum check for selecionado.

Label do botão

“btnLabel”:”Editar %n% selecionado%p%?”

O label é alterado de acordo com a quantidade de checks selecionados.  Para exibir a quantidade de checks selecionados, coloque %n%. Para alterar a mensagem do singular para o plural coloque %p%.

Checkbox Principal

“checkPrincipal”:”#selecionarTodos”

Checkbox principal – o check que ao ser selecionado , irá selecionar todos os outros da página (definidos com o parametro “checksSelecionar” )

Label default do botão

“defaultLabel”:”Selecione”

Caso nenhum check for selecionado, o valor default do botão é definido com o parametro “defaultLabel”

Download

Faça o download do plugin – aqui (ou aqui http://arenageek.com/selecionall/jquery.selecionall.js)

Exemplo [atualizado: 04/04/2010]

http://arenageek.com/selecionall/

Caso não consiga visualizar os vídeos abaixo, clique aqui para assistir no screenr.

Testado com

• Chrome 4.1.249
• Firefox 3.6.3
• Internet Explorer 7 e 8.

Se encontrar algum bug ou tenha alguma sugestão… “comentai”. Ou @eduardostuart

Manipulador onload jQuery

Para que alguns scripts funcionem corretamente, primeiramente a página deve estar completamente carregada, caso contrário poderá acontecer alguns erros na execução. Tradicionalmente o evento onload, faz com que as instruções sejam executadas só depois que a página for carregada completamente. A sintaxe seria:

<script type="text/javascript">
window.onload = function(){
//script
}
</script>

Isso faz com que o código seja executado somente depois que a página estiver totalmente carregada. A desvantagem de utilizar o window.onload é que o navegador não só atrasa a execução do código onload mas também espera o carregamento de todas as imagens da página e outros recursos externos . Caso tenha alguma imagem externa com um tamanho maior, os usuários / visitantes terão que esperar até o carregamento para que o script seja executado.

Como melhorar? Uma maneira de tornar a execução do script mais rápida seria utilizando a sintaxe:

<script type="text/javascript">
$(document).ready(function(){
//script
});
</script>

A diferença entre essa sintaxe e a anterior, é que ao invés de ter que esperar o carregamento das imagens da página, o visitante ira aguardar apenas o carregamento da estrutura do documento. Fazer isso de uma maneira cross-browser é um pouco complicado, porém com o jQuery esse processo fica mais fácil.

Outra vantagem de utilizar a segunda sintaxe, é que é possível utilizar múltiplas vezes dentro do mesmo documento HTML ao contrário do onload, que permite apenas uma única função.

Outra maneira seria utilizando a sintaxe de forma abreviada como:

<script type="text/javascript">
$((function(){
//script
});
</script>