JavaScript: Fazer o label do checkbox ser clicável

É comum usar checkboxes nas configurações ou na interface de seu site. Ao clicar nela alguma coisa é ligada, ao clicar novamente é desligada. Simples, não?

[X] Fundo colorido

O código para fazer uma opção destas é trivial:

<input id="fundo" onClick="trocaFundo()" type="checkbox">
Fundo colorido

No evento onClick é chamada a função trocaFundo(), que se encarrega de ligar ou desligar as cores no fundo do site. Até aí tudo bem.

O que é chato mesmo, é o usuário ter que mirar precisamente na caixinha do checkbox para poder ligar/desligar a opção. Uma interface mais amigável deveria permitir que o usuário também pudesse clicar no próprio texto de descrição (label) da opção, o “Fundo colorido”. Com mais área para cliques, o uso do site torna-se mais confortável.

Para fazer esse label clicável, basta adicionar o evento onClick nele também. E o que esse evento fará? Você pode colocar ali um “trocaFundo()” também, para ficar igual ao onClick do checkbox.

<input id="fundo" onClick="trocaFundo()" type="checkbox">
<span onClick="trocaFundo()">Fundo colorido</span>

Mas duplicar coisas não é bom. Se você ainda não aprendeu isso, pode deixar que a experiência um dia te ensinará. E se a trocaFundo() recebesse um this para identificar de onde veio o clique, também não funcionaria.

Uma solução mais robusta é fazer com que ao clicar no label, seja feito um clique “virtual” na própria checkbox. Deste modo, para a lógica do seu programa, é como se o usuário tivesse de fato clicado na checkbox.

<input id="fundo" onClick="trocaFundo()" type="checkbox">
<span onClick="document.getElementById('fundo').click()">
Fundo colorido
</span>

Atualização:
Quando escrevi este texto, eu não sabia que a tag LABEL era clicável e que ao clicar nela, o checkbox atrelado a ela era marcado/desmarcado. Muito obrigado a todos que comentaram sobre isso!

Assim sendo, não é preciso essa gambiarra JavaScript que eu sugeri, basta apenas usar a tag correta:

<input id="fundo" onClick="trocaFundo()" type="checkbox">
<label for="fundo">Fundo colorido</label>

O atributo for leva o nome do checkbox ao qual esta label está atrelada. E pronto, só isso. O navegador se encarregará de fazer o resto.

This entry was posted in JavaScript and tagged , , , , . Bookmark the permalink.

13 Responses to JavaScript: Fazer o label do checkbox ser clicável

  1. Chinello says:

    A maneira mais correta de fazer a mesma coisa é usar a TAG apropriada para isso, a tag . Da seguinte maneira:
    <input id=”fundo” onClick=”trocaFundo()” type=”checkbox”>
    <label for=”fundo”>Fundo colorido</label>

    Além de tudo, é semanticamente mais correto.

  2. Eu acho que a forma mais “semântica” no (x)html seria usar a tag “”. Ex:

    Fundo colorido

    mas é claro, sua dica ainda é muito válida.

    obs: e ainda coloco no css cursor: pointer pra label, pra ficar melhor evidenciado a forma de poder clicar nele.

    Abraço!

  3. opss.. o code html não foi no comentário

  4. Se não me engano há o estilo elemento:hover no css que equivale ao evento do mouse estar em cima do elemento e o elemento:active que corresponde ao onclick. Assim dá pra colocar tudo isso aí no css sem o javascript.

    O problema é que eles não funcionam no Internet Explorer 6 e só o hover funciona no IE7 hauahua.

    O legal disso é que dá pra criar um efeito de botão clicado só com css, bastando usar uma borda outset quando o elemento está “normal” e uma inset quando o elemento está clicado :-)

    Vc pode ainda colocar o texto do span como um label for checkbox, no próprio html, e assim minimizar o uso do javascript no código.

  5. Bom, existe a tag que funciona para isso.

  6. Daniel Medina says:

    ô jumentice! Usem a tag label!!!! pra que inventar!!!

    • Ramon says:

      Também acho que a tag label é melhor, Daniel, mas não há necessidade do adjetivo.

      No mais.
      Abs

  7. Aurélio says:

    Não sabia que a tag LABEL recebia cliques também! Vivendo e aprendendo…

    Obrigado a todos pela informação, vou atualizar o texto.

  8. Pulsar says:

    ô jumentice! Usem a tag label!!!! pra que inventar!!!;. All the best!!

  9. em uma lista c/ checkbox gostaria de selecionar uma opção e excluila , como faço isso tanto no bady quanto no script ?

  10. Muito obrigado pela tópico… Eu já tinha feito algumas vezes formulários com este recurso, mas eu usava um script para fazer a caixa marcar e desmarcar…
    Não sabia que era possível chamar diretamente o evento…

    Mais uma vez obrigado pela ajuda !!!

  11. Olá, obrigado pelo post, me ajudou bastante!!

Leave a Reply

Your email address will not be published. Required fields are marked *