Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Bom Dia. Essa semana estou criando tópico de JS que é uma beleza.
Tenho 3 funções:
1° - Quando passo o mouse em cima da linha ela muda de cor, caso ela ainda não esteja checada.
function mudacorlinha(id, el, x){
if(el == '1')
document.getElementById(id).style.backgroundColor = '#F7F7F7';
else
{
if(document.getElementById(x).checked != true)
document.getElementById(id).style.backgroundColor = '#FFFFFF';
}
}
2° - Se eu clico no CheckBox a linha inteiro muda de cor.
function mudacor(id, linha)
{
if(document.getElementById(id).checked == true)
document.getElementById(linha).style.backgroundColor = '#F7F7F7';
else
document.getElementById(linha).style.backgroundColor = '#FFFFFF';
}
3° - Se eu clico na linha o CheckBox é checado também.
function checar(check, linha)
{
if(document.getElementById(check).checked != true)
{
document.getElementById(check).checked = true;
document.getElementById(linha).style.backgroundColor = '#F7F7F7';
}
else
{
document.getElementById(check).checked = false;
document.getElementById(linha).style.backgroundColor = '#FFFFFF';
}
}
A primeira função pode descartar, ela não está atrapalhando em nada.
Está acontecendo o seguinte: Se eu clico na linha funciona, o CheckBox é selecionado, a linha muda de cor e boa.
Agora se eu clico no CheckBox, não funciona nada. Nem muda de cor e o CheckBox nem é selecionado. Acho que porquê o CheckBox está na linha e eu estou usando uma função para a linha.
Porém, não estou conseguindo resolver essa questão.
Sim, as vezes eu uso o <label>.
Você está dizendo para por o checkbox dentro de <label> ?
Tipo:
<label id=''><input type='checkbox' name='' id=''></label>
hum... não é bem isso..
vou te explicar oque o label realmente faz:
<label for="teste1">Teste 1</label><input type="checkbox" name="" id="teste1" />
clique na palavra Teste 1.
você verá que o checkbox será marcado.
É isso. <label> define uma área clicável, para o input.
assim, ao clicar na palavra (aplique a tua linha), o checkbox é marcado, e você não precisa do malabarismo JS para marcar, já que com apenas HTML dava para resolver.
Que legal. Disso eu não sabia mesmo.
Mas aí que tá... eu queria que ao clicar em qualquer parte da linha selecionasse o Check e não em uma palavra em específico.
Para você observar melhor entre aqui:
Login - ep3
Senha - ep333
Adicione um produto no carrinho. Clique na linha, clica de novo. E clica no Check.
tá com uns bugs nervosos o sistema ^_^
então cara, dá uma olhada no link sobre o .target, realmente parece que o teu problema é o mesmo, e você está executando as duas funções, assim uma está anulando a outra.
Ke bugs ?
já ouviu falar do elemento <label> ?
dá uma olhada nele, é bem interessante, e acho que resolve o teu problema, ai você descarta a função do click na linha.
oque você disse também pode ser verdade, pois um click em um elemento filho da linha, tb é um click na linha
dá uma olhada aqui:
http://forum.imasters.com.br/index.php?/topic/394884-div-sobre-outro/
nesse caso o .target pode te ajudar tb