É 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.
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.
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: pointerpra label, pra ficar melhor evidenciado a forma de poder clicar nele.Abraço!
opss.. o code html não foi no comentário
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.
Bom, existe a tag que funciona para isso.
tag label*
ô jumentice! Usem a tag label!!!! pra que inventar!!!
Também acho que a tag label é melhor, Daniel, mas não há necessidade do adjetivo.
No mais.
Abs
Não sabia que a tag LABEL recebia cliques também! Vivendo e aprendendo…
Obrigado a todos pela informação, vou atualizar o texto.
ô jumentice! Usem a tag label!!!! pra que inventar!!!;. All the best!!
em uma lista c/ checkbox gostaria de selecionar uma opção e excluila , como faço isso tanto no bady quanto no script ?
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 !!!
Olá, obrigado pelo post, me ajudou bastante!!
Well, there’s the tag that works for it.