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 d junho d 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 d junho d 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 d outubro d 2011

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

  • Oliver 3 d novembro d 2011

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

  • Felipe 18 d novembro d 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 d março d 2012

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

  • Anisio 19 d junho d 2012

    Muito bom!!!

  • Michel 2 d agosto d 2012

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

  • Luiz Henrique 21 d agosto d 2012

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

  • Alan 4 d dezembro d 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 d dezembro d 2012

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

  • João Paulo 10 d dezembro d 2012

    Mto bom o post, ajudou mto. 😀

  • Fabiano 3 d abril d 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 d maio d 2013

    Valeu RUAN BELO POST!

    ABRS

  • Marciel Viana 29 d maio d 2013

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

  • Cerebro Vasconcelos 19 d setembro d 2013

    beleza funciona mesmo, me ajudou na hora certa.

  • Marcus 12 d dezembro d 2013

    Ajudou bastante! Obrigado!

  • Raphael Correa 4 d junho d 2014

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

  • Douglas 13 d julho d 2014

    Era exatamente o que eu procurava.Realmente JQuery veio para facilitar e muito a nossa mmaneira de escrermos JavaScript.
    Me ajudou muito a sua explicação. Simples e Eficaz.Continue assim. Valeu !

  • David Rimisck 30 d setembro d 2014

    Tenho uma duvida. Em c# a gente seta nomeContainer.visible =false; //esconde o container

    If (nome_radio.checked == true)
    {
    NomeContainer.visible == true;//mostra o container ao clicar no radio button
    }

    Como ui faria isso com jQuery?

    Tentei parecido mas na deu certo. So consigobsecem vez de radio eu fazer com link.

  • rafael 27 d fevereiro d 2015

    Ótimo!!!! Me ajudou bastante!

  • David Machado 29 d maio d 2015

    DESCHECADO???? :-O
    UGH!!!! Essa doeu…

  • Alvaro Mota 17 d outubro d 2015

    Só esqueceu de avisar que o .attr(“checked”,true) só funciona quando vc da um refresh nele.
    Exemplo do uso correto ficaria assim:
    $(“input[name=teach]”)
    .attr( “checked”, true )
    .checkboxradio(“refresh”);
    Tipo isso, e deve ser feito sempre que tiver dinamica envolvendo os checkbox ou radio.
    Mas foi muito esclarecedor seu post amigo. 😉

Deixe seu Comentário