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