02/06/2011

Manipulando Checkbox e Radio Button com jQuery

Muitas pessoas tem problemas em manipular checkbox e radio button. Irei mostrar como trabalhar com eles.

Os checkbox e os radio button são um pouco diferente dos outros elementos no html. Eles têm uma propriedade booleana chamada checked, mas diferente das outras propriedades ela pode ser declarada sem um valor (isso pode dar um erro na validação do seu html). Ex:

<input type="checkbox" checked />
<input type="radio" checked />

<input type="radio" checked="checked" />
<input type="checkbox" checked="nao checado" />

Demo


Como vocês podem ver, não importa o valor da propriedade, quando temos ela o elemento sempre estará checado.

Então como trabalhar com essa propriedade no jQuery?

O jQuery é muito inteligente e nos da várias maneiras de trabalhar com ela, mas existe apenas uma forma de trabalhar que é segura e correta. (nem tudo que funciona é o correto).
jQuery nos disponibiliza os seguinte métodos para nós:

  • attr()
  • is()

Com eles podemos verificar se a propriedade esta setada ou não, assim como podemos setá-la.

Checando e deschecando com jQuery

Para checar e deschecar algo é bem simples, basta usarmos o attr()

//checando
$("#id_do_meu_check").attr("checked",true);
//deschecando
$("#id_do_meu_check").attr("checked",false);

Demo:

Legal né?

Como verifico se está checado?

Para verificar se esta checado é mais fácil ainda, temos o is() para isso.

$("#id_do_meu_check").is(":checked"); //retorna true ou false

Devido ao is() verificar se um grupo de elementos contém algum com um certo seletor o checked deve ser passado como seletor: :checked.
Caso meu checkbox ou radio button estive checado ele retorna true caso contrário retorna false

Demo:

Por que usar o is() e não o attr(“checked”)?

A forma correta de verificar se esta checado é o is() pois como já disse, o atributo checked é um atributo boleano e “sem valor”, seu comportamento pode ser alterado nas próximas versões do HTML, ou até mesmo na interpretação do jQuery.
Quando o jquery 1.6 foi lançado ocorreu esse problema, pois o attr() passou a pegar apenas o valor inícial da propriedade e como checked não tem valor, ele retornava uma string vazia ou undefined.

Como checar todos?

Para checar todos apenas precisamos da coleção de objeto e através do attr() setamos tudo.

$("input:checkbox").attr("checked",true);

Demo:

E como deschecar todos?

Da mesma maneiro que checar, a única diferença vai ser passar false ao invés de true

$("input:checkbox").attr("checked",false);

Demo:

E como alterno entre checado e deschecado?

Simples, apenas precisamos usar a funçao toggle()

$("#trocar").toggle(
    function(){
        $("input:checkbox").attr("checked",true);
    },
    function(){
        $("input:checkbox").attr("checked",false);
    }
)

Demo:

Bom é isso, espero ajudar muitas pessoas.

Cya


, , ,

Comentários

  • Tiago Faustino 10 de junho de 2011

    Se não me recordo, agora com a versão 1.8.1 foi alterada a forma de se usar esses atributos. Seria com método prop().

    • Ruan Carlos 13 de junho de 2011

      Olá, a versão correta é 1.6+, pode-se usar a função prop() sim, porém a mesma não é compatível com versões anteriores ao jquery 1.6 nem com IE menor que o 9 (pode causar problemas com a memória).

  • Cesar 26 de outubro de 2011

    Vlw … me ajudou bastande o “is()”.

  • Oliver 3 de novembro de 2011

    Adorei toda esse checa, checa, checa….kkkkk
    Muito bom parabéns!

  • Felipe 18 de novembro de 2011

    Gostei tambem do “is()”.
    Esta tendo problemas com o attr(‘checked) , que me retornava sempre ‘checked’, caso ela já venha marcado como padrao, via PHP.

    Mas com o is(), me retorna o estado atual mesmo.

  • Regivaldo 28 de março de 2012

    Muito bom o tutorial.
    O is() realmente me ajudou!

  • Anisio 19 de junho de 2012

    Muito bom!!!

  • Michel 2 de agosto de 2012

    Cara, ajudou d+!
    Dei de cara com o jQuery aki no trabalho, e precisava de dicas como essas!
    Vlw mesmo!

  • Luiz Henrique 21 de agosto de 2012

    Muito obrigado pelo auxílio. E parabéns por todos os exemplos, muito úteis mesmo!

  • Alan 4 de dezembro de 2012

    Olá Ruan!!

    Muito útil seu post, gostaria que de saber se pode me ajudar em uma dúvida. Gostaria de saber como faço para tornar o preenchimento de um campo text obrigatório, após um radio button ou checkbox for selecionado?

    obrigado!

  • George 6 de dezembro de 2012

    Valeu cara!!! Este POST me ajudou muito!!

  • João Paulo 10 de dezembro de 2012

    Mto bom o post, ajudou mto. :D

  • Fabiano 3 de abril de 2013

    Obrigado pela dica!

    Estava tentando usar o ‘attr(“”)’ para verificar e não estava dando certo. Com o ‘is()’ funcionou certinho.

    Abs!

  • Daniel 15 de maio de 2013

    Valeu RUAN BELO POST!

    ABRS

  • Marciel Viana 29 de maio de 2013

    Olá Ruan, parabéns, muito bom seu artigo, muito esclarecedor.

  • Cerebro Vasconcelos 19 de setembro de 2013

    beleza funciona mesmo, me ajudou na hora certa.

  • Marcus 12 de dezembro de 2013

    Ajudou bastante! Obrigado!

  • Raphael Correa 4 de junho de 2014

    Como faço pra criar um formulario q dependendo dos checkbox q eu marcar vai abrindo mais checkbox especificos ???

Deixe seu Comentário