Cambiar color background a DIV con checkBox

Bier · #1 (**permalink**) 21/05/2010, 12:15

Espero este sea el lugar adecuado para dejar mi post.

Tengo un Form con una tabla de 8 filas y 4 columnas.
En la columna 1 de cada fila tengo un CheckBox
Deseo que al seleccionar el CheckBox, cambie el color de fondo de la fila completa

Imagino se debe hacer con J.S.

¿Podrían darme una idea al respecto?

Adler · #2 (**permalink**) 21/05/2010, 14:23

Hola

Sería algo como esto

Código Javascript:

Ver original<html>
<head>
<script type="text/javascript">
window.onload = function() {
cant_tr = document.body.getElementsByTagName('tr');
cant_inpt = document.body.getElementsByTagName('input');
 
    for (i=0; i < cant_tr.length; i++) {
 
        for (j=2; j < cant_inpt.length; j+=3) {
 
            cant_inpt[j].onclick = function() {
                document.getElementById('td_'+this.id).style.backgroundColor = 'red';
 
            }
        }
    }
}
</script>
</head>
<body>
<table border="1">
<tr id="td_1">
<td><input type="text" value="" /></td><td><input type="text" value="" /></td><td>&nbsp<input type="checkbox" id="1" /></td>
</tr>
<tr id="td_2">
<td><input type="text" value="" /></td><td><input type="text" value="" /></td><td>&nbsp<input type="checkbox" id="2" /></td>
</tr>
<tr id="td_3">
<td><input type="text" value="" /></td><td><input type="text" value="" /></td><td>&nbsp<input type="checkbox" id="3" /></td>
</tr>
</table>
</body>
</html>

Suerte

wiwi74 · #3 (**permalink**) 21/05/2010, 15:38

Prueba esto:
Checa y descheca:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin título</title>
</head>

<body>

<form>
<table border="1" cellpadding="10">
<tr id="1">
<td><input onclick="if(this.checked){
document.getElementById('1').style.backgroundColor ='red';
}else{
document.getElementById('1').style.backgroundColor ='blue';
}"
type="checkbox" /></td>
<td >Contenido</td>
<td >Contenido</td>
<td >Contenido</td>
</tr>

<tr id="2">
<td><input onclick="if(this.checked){
document.getElementById('2').style.backgroundColor ='red';
}else{
document.getElementById('2').style.backgroundColor ='blue';
}"
type="checkbox" /></td>
<td >Contenido</td>
<td >Contenido</td>
<td >Contenido</td>
</tr>

</table>
</form>

</body>
</html>

Bier · #4 (**permalink**) 21/05/2010, 16:01

Gracias, ambos códigos funcionan de acuerdo a lo que requiero. ¡Excente!

Ahora quisiera este mismo efecto, pero con "Boton de Opción" (radio), el cual tiene 5 opciones y asignarle el color de fondo según la opción seleccionada.

Gracias

wiwi74 · #5 (**permalink**) 21/05/2010, 16:31

Bueno pero nada mas por hoy:

Si deseas agregar mas radios fijate en esto:

para el primer radio 1 se pone rojo 2 blanco
onclick="document.getElementById('1').style.backgr oundColor='red';
document.getElementById('2').style.backgroundColor ='white';
si habria un tercero lo ponemos blanco
document.getElementById('3').style.backgroundColor ='white';

para el segundo radio 2 se pone rojo 1 blanco
onclick="document.getElementById('2').style.backgr oundColor='red';
document.getElementById('1').style.backgroundColor ='white';
si habria un tercero lo ponemos blanco
document.getElementById('3').style.backgroundColor ='white';

En sintesis le pone el mismo numero ('aqui') que tiene la fila <tr id='num'> donde se encuantra el radio.

El codigo:

<form>
<table border="1" cellpadding="10">
<tr id="1">
<td><input type="radio"
name="equipo"
value="equipo1"
onclick="document.getElementById('1').style.backgr oundColor='red';
document.getElementById('2').style.backgroundColor ='white';
" />
</td>
<td >Contenido</td>
<td >Contenido</td>
<td >Contenido</td>
</tr>

<tr id="2">
<td><input type="radio"
name="equipo"
value="equipo2"
onclick="document.getElementById('2').style.backgr oundColor='red';
document.getElementById('1').style.backgroundColor ='white';
" />
</td>
<td >Contenido</td>
<td >Contenido</td>
<td >Contenido</td>
</tr>

</table>
</form>

Bier · #6 (**permalink**) 21/05/2010, 17:07

Gracias.

He adaptado un poco el código y trabaja perfecto para mi requerimiento.
En mi aplicación realmente tengo 100 filas y 6 botones radio por fila, lo que hace un total de 600 opciones radio.
Mi aplicación es PHP y puedo asignar el código sin problema

A continuación muestro el código que estoy empleando.

Pregunta: ¿Podría incluirse una función y evitar saturar de código el HTML?

Gracias anticipadas.

Código HTML:

Ver original<form>
<table border="1" cellpadding="10">
 
<tr id="1">
<td>
<input  type="radio" name="equipo1" value="1" onclick="document.getElementById('1').style.backgroundColor='blue';" />
</td>
<td>
<input type="radio" name="equipo1" value="2" onclick="document.getElementById('1').style.backgroundColor='red';" />
</td>
<td ><input type="radio" name="equipo1" value="3" onclick="document.getElementById('1').style.backgroundColor='yellow';" />
</td>
<td >Contenido</td>
</tr>
 
<tr id="2">
<td>
<input  type="radio" name="equipo2" value="1" onclick="document.getElementById('2').style.backgroundColor='blue';" />
</td>
<td>
<input type="radio" name="equipo2" value="2" onclick="document.getElementById('2').style.backgroundColor='red';" />
</td>
<td ><input type="radio" name="equipo2" value="3" onclick="document.getElementById('2').style.backgroundColor='yellow';" />
</td>
<td >Contenido</td>
</tr>
 
<tr id="3">
<td>
<input  type="radio" name="equipo3" value="1" onclick="document.getElementById('3').style.backgroundColor='blue';" />
</td>
<td>
<input type="radio" name="equipo3" value="2" onclick="document.getElementById('3').style.backgroundColor='red';" />
</td>
<td ><input type="radio" name="equipo3" value="3" onclick="document.getElementById('3').style.backgroundColor='yellow';" />
</td>
<td >Contenido</td>
</tr>
 
</table>
</form>

wiwi74 · #7 (**permalink**) 21/05/2010, 20:25

Crea un archivo php y metele este codigo dentro de las etiquetas <body></body>
No toques nada, ya funciona, luego si, adaptalo.

Solo fijate en estas 2 lineas, que se genera un espacio " #ff0000" bueno quitalo que da error:
(se generan al darle a guardar, aqui en el foro)
document.getElementById(i).style.backgroundColor=" #ff0000"; //esta es una
document.getElementById(i).style.backgroundColor=" #ffffff"; //esta la otra (estan mas abajo)

El codigo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Documento sin título</title>

<script type="text/javascript" language="javascript">
function darColor(paramID){
//alert(document.getElementsByTagName("tr").length);
for(i=0; i<(document.getElementsByTagName("tr").length); i++){
//alert(document.getElementById(i).id);
if(document.getElementById(i).id == paramID){
document.getElementById(i).style.backgroundColor=" #ff0000";
}else{
document.getElementById(i).style.backgroundColor=" #ffffff";
}
}
}
</script>

</head>

<body>

<form action="" method="post">
<table border="1" cellpadding="10">
<?
//CODIGO DINAMICO
for($i=0; $i<10; $i++){

echo'<tr id="'.$i.'"><td>
<input type="radio"
name="equipo"
value="equipo'.$i.'"
onclick="darColor('.$i.')" />
</td>
<td>
Contenido
</td>
</tr>';

}

?>

</table>
<BR /><input type="submit" value="MOSTRAR EL VALOR CHECADO" />
</form>

<?
echo "<br />".$_POST['equipo'];
?>

</body>
</html>

Bier · #8 (**permalink**) 21/05/2010, 21:08

Estimado wiwi74,

Tu ayuda ha sido invaluable, gracias.

En base a tu primer propuesta, desarrolle toda la función en PHP, la cual trabaja perfectamente.

Ahora con esta reciente propuesta (con función), será más eficiente el PHP, cabe comentar que lo he desarrollado de manera similar a tu segunda propuesta, por lo que aplicar la función me será de relativa facilidad.

Gracias.

wiwi74 · #9 (**permalink**) 21/05/2010, 22:17

Gracias y suerte...