[SOLUCIONADO] Display div fila tabla al seleccionar check

dasapa · #1 (**permalink**) 11/12/2014, 06:57

Hola,

tengo el siguiente codigo y la funcion en javascript para mostrar el div "fecha-prevista". Hay un check en cada fila de una tabla y se debería mostrar el div en la misma fila (debajo del chheck) pero con el codigo siguente solo se muestra-oculta el div de la primera fila. Agradecería ayuda...llevo un tiempo dandole vueltas.

Código PHP:

  <input id="check-fecha" type="checkbox" onclick=toggle();></input>

<input id="fecha-prevista" class="fecha-prevista"></input>

Código PHP:

  function toggle() {

if (document.getElementById) {

if (document.getElementById("check-fecha").checked == true) {

document.getElementById("fecha-prevista").style.display = "block";

} else {

document.getElementById("fecha-prevista").style.display = "none";

}}}

Gracias. Un saludo

IsaBelM · #2 (**permalink**) 11/12/2014, 07:12

no puedes duplicar las ids.
como verás he realizado algunos cambios, incluso en el html

Cita:

<input type="checkbox" onclick='toggle(this, this.nextElementSibling)' />
<input class="fecha-prevista" />

<script type="text/javascript">
function toggle(este, nxt) {
nxt.style.display = este ? "inline" : 'none';
}
</script>

si quieres compatibilidad con navegadores antiguos, lee esto

dasapa · #3 (**permalink**) 11/12/2014, 08:46

Hola,

gracias por la respuesta pero no lo entiendo muy bien.

Esta el checkbox que tiene este id="check-fecha" y esta el input que se tiene que visualizar al clicar en el check que tiene este id="fecha-prevista". Con el codigo que puse en el primer post se hace visible el input solo en la primera fila.

En el codigo que ha indicado que quiere decir con "este"? No lo entiendo

Código PHP:

  function toggle(este, nxt) {
nxt.style.display =este ? "inline" : 'none';
}

Gracias por la contestación.

Un saludo

dasapa · #4 (**permalink**) 11/12/2014, 09:06

ok, perdona no había usado esta función "this.nextElementSibling" y no puede usarla en este caso. Es una tabla en la que cada fila tiene dos rowspan. El checkbox esta en la parte de arriba y la idea es que al checkear se haga visible el input en la parte de abajo.

El codigo html es algo similar a esto, la ultima columna es la que aparece el desplegable.

Código PHP:

  <table>

<body>

<tr>

<td><input 1.1></td>

<td><input 1.2></td>

<td><input 1.3></td>

<td><input id="check-fecha" type="checkbox"></td>

</tr>

 
 
<tr>

<td><input 2.1></td>

<td><input 2.2></td>

<td><input 2.3></td>

<td><input id="fecha-prevista"></td>

</tr>

 
</body>

</table>

Un saldo

Adrianbu95 · #5 (**permalink**) 11/12/2014, 10:00

Creo que no te estas explicando bien ya que en el primer comentario has dicho que hay un div con id="fecha-prevista" y luego resulta ser un input, tambien dices que hay un checkbox en cada fila de la tabla y quieres que se muestre el input id="fecha-prevista" en la misma fila...
Un caos, explicate mejor, si lo que quieres es que aparezca cuando el checkbox esta check es tan facil como:

Código:

if  (!document.getElementById('check-fecha').checked)  {
document.getElementById('fecha-prevista').style.display = 'none';
}

IsaBelM · #6 (**permalink**) 11/12/2014, 10:47

El equivalente es this.checked

Te comenté que no puedes duplicar las id, por ello has usar clases y hacer referencia a los elementos con queryselectorall

dasapa · #7 (**permalink**) 11/12/2014, 11:31

Es cierto, disculpa. Creo que es mas sencillo con una imagen (link). Solo consigo mostrar el input en la primera fila.

http://imageshack.com/a/img901/5760/WzkhYD.jpg

Un saludo

IsaBelM · #8 (**permalink**) 12/12/2014, 06:53

como has cambiado varias veces, supongo que el layout es este. en lugar de usar id se usa class

Cita:

y este sería el javascript

Cita:

[].forEach.call(document.querySelectorAll('.check-fecha'), function(elem, i) {
elem.addEventListener('click', function() {toggle(this.checked, i)}, false);
})

function toggle(este, i) {
document.querySelectorAll('.fecha-prevista')[i].style.display = este ? "inline" : 'none';
}

si quieres que sea compatible con ie8-, habría que hacer algunos cambios

dasapa · #9 (**permalink**) 12/12/2014, 09:08

Muchas gracias maquina!!