jQuery: marcando/desmarcando todos os checkbox (check/uncheck checkboxes)
Você precisa criar um checkbox que quando marcado, marque também todos os outros de uma lista de registros, por exemplo?
Com jQuery consegui resolver isso facilmente.
Primeiro criei um checkbox que marcará e desmarcará os outros:
-
<input type="checkbox" id="checkAll" />
E os que serão marcados terão a seguinte configuração:
Agora o JavaScript:
-
$(document).ready(function(){
-
$("#checkAll").change(function() {
-
if(this.checked){
-
v = true;
-
}else{
-
v = false;
-
}
-
chs = $(".chM").get();
-
for(i=0; i
-
chs[i].checked=v;
-
});
-
});
Este código será executado quando o documento for carregado, ou seja, quando ele estiver pronto (ready).
De forma resumida, adicionamos um evento (change) ao checkbox checkAll, quando executado, verifica o valor do checkbox e baseado neste altera o valor dos checkboxes com class=chM. No caso o $(".chM").get(); retorna todos os elementos que possuem essa classe "chM".
Bem simples, não?
UPDATED (08/02/2007):
Recebi via comentário uma outra maneira de marcar todos os checkboxes usando as expressões do jQuery, vale a pena conferir:
http://www.georgisvetoslavov.name/codes/jquery_checkboxes.html
Enviada por Georgi
/UPDATED
Qualquer dúvida, comentem!
Abraços e até a próxima!
fred said,
Fevereiro 8, 2007 @ 14:18
Muito interessante...
ao meu ver... o jquery eh uma especie de framework que combina JS + CSS ?
Vejo que muitas pessoas o utilizam com cake para chamadas Ajax...
Eu acho o AjaxHelper do cake tao facil... que eu nao vejo a necessidade de usar jQuery...
Como o Jquery poderia me ajudar substituindo o Prototype ?
Gostaria de ver + artigos sobre Jquery + Ajax + cakePHP...
falowww
valew
Georgi said,
Fevereiro 8, 2007 @ 17:25
esta bien, pero siguies utilizando los viejos metodos de javascript como for() y if checked.
un simple ejemplo http://www.georgisvetoslavov.name/codes/jquery_checkboxes.html
Saludos, Georgi
tulio said,
Fevereiro 8, 2007 @ 21:57
Fred,
podemos dizer que o jQuery combina funcionalidades do Prototype e Scriptaculous nativamente. Lógico, que adiciona algumas outras também.
O jQuery poderia substituir no momento de fazer algum efeito, como os que o Scriptaculous possui.
Pedido anotado
Abraços,
tulio said,
Fevereiro 8, 2007 @ 22:04
Georgi,
muito bom seu exemplo, aliás bem mais simples. Eu irei atualizar o post.
Saludos,
I dont know Spanish, so I will reply in English
great example! And very simple! I will update the post with your tip....
Thanks,
Georgi said,
Fevereiro 9, 2007 @ 04:41
Sorry that I wrote it in Spanish, but I only can read and speak Portuguese, and can not write
Hope you like the example.
These days finaly I'll launch my new website and I'm goin' to publish an examples of any kind, so everybody can learn from them.
I found very interestin' tutorials in here, so I'll be happy to publish like a href link some of them on my website, of course with your permission. I'll add yoru site to my links category too.
So, best regards and happy weekend,
Georgi.
Rafael Santos said,
Abril 9, 2007 @ 01:31
Uma dica de seleção q eu sempre uso pra evitar encher de classes o código, é
$("input[name=inputX]") (selecionando checkboxes especificos)
ei, sabia que $("#meuCheck:checked") ou $("#meuCheck").is(":checked") existem?! =)
Fabyo said,
Abril 9, 2007 @ 10:26
Fiz um exemplo bem simples
$(document).ready(function() {
$("p").toggle(function(){
$("input[@type=checkbox]").each(function(){this.checked = true;});
},function(){
$("input[@type=checkbox]").each(function(){this.checked = false;});
});
});
p {
cursor:pointer;
text-decoration: underline;
}
Seleciona Todas
Fabyo said,
Abril 9, 2007 @ 10:38
Pessoal desculpe nao coube meu exemplo, mas acho que deu para entender a ideia
e melhorando o proprio exemplo desse tutorial:
chs[i].checked = this.checked ? true : false;
Tulio Faria said,
Abril 9, 2007 @ 14:03
Boa Fabyo...