jQuery: marcando/desmarcando todos os checkbox (check/uncheck checkboxes)

CheckboxesVocê 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:

  1. <input type="checkbox" id="checkAll" />

E os que serão marcados terão a seguinte configuração:

  1. <input type="checkbox" value="1" class="chM" />
  2.  
  3. <input type="checkbox" value="2" class="chM" />

Agora o JavaScript:

javascript
< view plain text >
  1. $(document).ready(function(){
  2. $("#checkAll").change(function() {
  3. if(this.checked){
  4. v = true;
  5. }else{
  6. v = false;
  7. }
  8. chs = $(".chM").get();
  9. for(i=0; i
  10. chs[i].checked=v;
  11. });
  12. });

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!

24 Comment

  1. 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

  2. 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

  3. 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,

  4. 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,

  5. 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.

  6. 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?! =)

  7. 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

  8. 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;

  9. Boa Fabyo…

  10. Não entendi esse trecho????

    for(i=0; i

    chs[i].checked=v;

  11. Vlw tava com algumas duvidas
    e agora resolvido vlw

  12. Marcando e desmarcando todos os checkbox com jquery
    $(document).ready(function(){Inicializa();
    $(‘#Todos’).click(function(){$(‘:checkbox’).attr(‘checked’,this.checked)});
    HTML

  13. Marcando e desmarcando todos os checkbox com jquery
    $(document).ready(function(){
    $(‘#Todos’).click(function(){$(‘:checkbox’).attr(‘checked’,this.checked)});
    };
    HTML

    Obs.: REPETIDO: O post anterior está incompleto

  14. tambem nao entendi a parte do “for”

  15. Esse metodo está muuuito bom, cara! Adorei! 🙂

    mas veja o laço for… ele está errado =/
    você abriu as condições mas nao as completou nem as fechou, consequentemente nao abriu o for para colocar as instruções…

    corrija aí, mano!
    senão a galera vai criticar 😉
    o/

  16. opa
    para marcar todos basta
    $(‘.list_check’).attr(‘checked’, ‘checked’);
    descmarcar
    $(‘.list_check’).attr(‘checked’, ”);

    agora preciso capturar somente os checkados sem dar refresh
    alguem da uma luz aew

  17. Olá, fiz um aqui.

    $(function () {
    $(“#checkAll”).change(function(){
    if (this.checked) {
    $(“.chM”).attr({ checked: true });
    } else {
    $(“.chM”).attr({ checked: false });
    }
    });
    $(“.chM”).change(function(){
    if ($(“#main”).attr(‘checked’) == true) {
    $(“#main”).attr({ checked: false })
    }
    });
    });

    Ele seleciona e desseleciona os checkbox com classe “chM” ao selecionar o checkbox com id “checkAll” e desseleciona este último ao desselecionar algum com classe “chM”.

    E só pra constar, o FOR do seu script tá incompleto e o exemplo no final do post não tá funcionando.

    Abraço.

  18. Bem simples

    $(“#checkAll”).change(function(){$(“.chM”).attr(‘checked’, this.checked);});

  19. Porque seu exemplo não funciona?

  20. $(“#all”).click(function(){
    $(‘:checkbox’).attr(‘checked’,this.checked);
    });

  21. $(“#all”).click(function(){
    var all = $(this).attr(‘checked’);
    $(‘input[name=”classificacao[]”]’).each(function(){
    $(this).attr(‘checked’,all);
    });

  22. Olá, boa noite, estou tentando fazer este select a horas nenhum exemplo que achei na internet funcionou este jquery_checkboxes.js q tem ai nos comments, nen ele funcionou olha q cliquei no link dele e teste ali msm n baixei nen nada, o que seria eficaz???

  23. Cara Jquery é uma linguagem que trabalha com seletores e isto faz dela uma linguagem de script bastante poderosa e possibilita coisas do tipo:$(document).ready(function(){

    $(‘#Todos’).click(function(){$(‘:checkbox’).attr(‘checked’,this.checked)});
    };

    Ou seja, não se faz necessário o uso de for, além disto o seu script está quebrado, por favor reveja seu exemplo e parabéns pela iniciativa.
    ABs

  24. Obrigado pessoal!
    usei o script do Lucas Guima 😉

Deixe uma resposta