Função com CheckBox

[Dee 0]

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.

[William Bruno 1501]

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

[Dee 0]

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>

[William Bruno 1501]

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.

[Dee 0]

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:

 

http://www.salcam.com.br/ep3

 

Login - ep3

Senha - ep333

 

Adicione um produto no carrinho. Clique na linha, clica de novo. E clica no Check.

[William Bruno 1501]

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.

[Dee 0]

Ke bugs ?