Mundo Retro

Olá CONVIDADO,

Seja bem Vindo ao Mundo Retro.

Obrigado pela visita,
Aqui você encontra papéis de parede, capas de filmes, ajuda, detonados de jogos de xbox 360, ps3 e ps2 e muito mais ...

Fazer o label do checkbox ser clicável

SystemX
SystemX
Membro
Membro

Posts Posts : 10
Respeito Respeito : 0

Fazer o label do checkbox ser clicável Empty Fazer o label do checkbox ser clicável

Mensagem por SystemX em Sex Jun 08, 2012 9:43 pm

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:



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
iLuc
iLuc
Administrador
Administrador

Posts Posts : 2164
Respeito Respeito : 379

Fazer o label do checkbox ser clicável Empty Re: Fazer o label do checkbox ser clicável

Mensagem por iLuc em Sab Jun 09, 2012 10:33 pm

Otimo topico, obrigado por postar, irá ajudar muitas pessoas ^^"


_________________
Fazer o label do checkbox ser clicável 62164458412571464917

Fazer o label do checkbox ser clicável 94128818689691842203

    Data/hora atual: Dom Ago 25, 2019 5:00 pm