Fazer o label do checkbox ser clicável

System escreveu:É 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:

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.

Fundo colorido

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.



Fundo colorido


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:

Fundo colorido

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.

Créditos: Aurélio