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

2 Respostas para Selecionar/Desmarcar todos – plugin jQuery [atualizado]

  1. Sávio Canuto disse:

    Olá Eduardo, você já trabalhou usando o richfaces? Se sim, como eu poderia usar essa sua função usando uma das tags do richfaces “h:selectBooleanCheckbox”? Isso dentro de um dataTable?

  2. Pingback: Selecionar/Desmarcar todos – plugin jQuery [atualizado … | Scratch Card Winner.com

Deixe uma resposta

Preencha os seus dados abaixo ou clique em um ícone para log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Sair / Alterar )

Imagem do Twitter

You are commenting using your Twitter account. Sair / Alterar )

Foto do Facebook

You are commenting using your Facebook account. Sair / Alterar )

Connecting to %s

Seguir

Obtenha todo post novo entregue na sua caixa de entrada.