0

Tengo esta tabla html:

<table>
<tr>
<td>A</td>
<td><img src="img/d1.png"><input type="checkbox" class="ocultar chk_asiento" value="A1" onClick="asignar(this);"></td>
<td><img src="img/d2.png"><input type="checkbox" class="ocultar chk_asiento" value="A2" onClick="asignar(this);"></td>
<td><img src="img/d3.png"><input type="checkbox" class="ocultar chk_asiento" value="A3" onClick="asignar(this);"></td>
<td><img src="img/d4.png"><input type="checkbox" class="ocultar chk_asiento" value="A4" onClick="asignar(this);"></td>
<td><img src="img/d5.png"><input type="checkbox" class="ocultar chk_asiento" value="A5" onClick="asignar(this);"></td>
<td><img src="img/d6.png"><input type="checkbox" class="ocultar chk_asiento" value="A6" onClick="asignar(this);"></td>
<td><img src="img/d7.png"><input type="checkbox" class="ocultar chk_asiento" value="A7" onClick="asignar(this);"></td>
<td><img src="img/d8.png"><input type="checkbox" class="ocultar chk_asiento" value="A8" onClick="asignar(this);"></td>
<td><img src="img/d9.png"><input type="checkbox" class="ocultar chk_asiento" value="A9" onClick="asignar(this);"></td>
<td><img src="img/d10.png"><input type="checkbox" class="ocultar chk_asiento" value="A10" onClick="asignar(this);"></td>
<td>A</td>
</tr>
<tr>
<td>B</td>
<td><img src="img/d1.png"><input type="checkbox" class="ocultar chk_asiento" value="B1" onClick="asignar(this);"></td>
<td><img src="img/d2.png"><input type="checkbox" class="ocultar chk_asiento" value="B2" onClick="asignar(this);"></td>
<td><img src="img/d3.png"><input type="checkbox" class="ocultar chk_asiento" value="B3" onClick="asignar(this);"></td>
<td><img src="img/d4.png"><input type="checkbox" class="ocultar chk_asiento" value="B4" onClick="asignar(this);"></td>
<td><img src="img/d5.png"><input type="checkbox" class="ocultar chk_asiento" value="B5" onClick="asignar(this);"></td>
<td><img src="img/d6.png"><input type="checkbox" class="ocultar chk_asiento" value="B6" onClick="asignar(this);"></td>
<td><img src="img/d7.png"><input type="checkbox" class="ocultar chk_asiento" value="B7" onClick="asignar(this);"></td>
<td><img src="img/d8.png"><input type="checkbox" class="ocultar chk_asiento" value="B8" onClick="asignar(this);"></td>
<td><img src="img/d9.png"><input type="checkbox" class="ocultar chk_asiento" value="B9" onClick="asignar(this);"></td>
<td><img src="img/d10.png"><input type="checkbox" class="ocultar chk_asiento" value="B10" onClick="asignar(this);"></td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td><img src="img/d1.png"><input type="checkbox" class="ocultar chk_asiento" value="C1" onClick="asignar(this);"></td>
<td><img src="img/d2.png"><input type="checkbox" class="ocultar chk_asiento" value="C2" onClick="asignar(this);"></td>
<td><img src="img/d3.png"><input type="checkbox" class="ocultar chk_asiento" value="C3" onClick="asignar(this);"></td>
<td><img src="img/d4.png"><input type="checkbox" class="ocultar chk_asiento" value="C4" onClick="asignar(this);"></td>
<td><img src="img/d5.png"><input type="checkbox" class="ocultar chk_asiento" value="C5" onClick="asignar(this);"></td>
<td><img src="img/d6.png"><input type="checkbox" class="ocultar chk_asiento" value="C6" onClick="asignar(this);"></td>
<td><img src="img/d7.png"><input type="checkbox" class="ocultar chk_asiento" value="C7" onClick="asignar(this);"></td>
<td><img src="img/d8.png"><input type="checkbox" class="ocultar chk_asiento" value="C8" onClick="asignar(this);"></td>
<td><img src="img/d9.png"><input type="checkbox" class="ocultar chk_asiento" value="C9" onClick="asignar(this);"></td>
<td><img src="img/d10.png"><input type="checkbox" class="ocultar chk_asiento" value="C10" onClick="asignar(this);"></td>
<td>C</td>
</tr>
</table>

Como se pueden dar cuenta dentro de cada celda tengo una imagen y un checkbox que lo tengo oculto display: none; lo que necesito es que cuando de click en la imagen se lance el evento onClick que tiene el checkbox para tomar su valor y guardarlo en un array, como podría hacer esto. No voy a usar JQuery solo JavaScript.

Preguntando me comentaron que en lugar de ocultar el checkbox le diera un opacity de 0, lo hice pero no funcionó que podría tener mal?

3
  • es un poco raro eso, no? usar un evento click para un checkbox en lugar de mirar si esta chequedo o no
    – user7176
    el 23 nov. 2018 a las 7:17
  • @blonfu como haria para que en el momento de dar click sobre la imagen se se seleccione el checkbox?? el 23 nov. 2018 a las 15:11
  • Lo mas fácil es poner las imágenes en un label y asociarlo con el checkbox
    – user7176
    el 26 nov. 2018 a las 6:01

1 respuesta 1

0

Si lo que necesitas es solo guardar el value en un array al momento de seleccionar una imagen entonces solo necesitas darle un push a un array que declares, puedes asignar el value a las imágenes y mandar a llamar el evento onClick, te muestro un ejemplo:

var arrImg = [];

function asignar(val){
  var valor = val.getAttribute("value");
  arrImg.push(valor);
  console.log(arrImg);
}
<table>
<tr>
<td>A</td>
<td><img src="img/d1.png" value="A1" onClick="asignar(this);"><input type="checkbox" class="ocultar chk_asiento" value="A1" onClick="asignar(this);"></td>
<td><img src="img/d2.png" value="A2" onClick="asignar(this);"><input type="checkbox" class="ocultar chk_asiento" value="A2" onClick="asignar(this);"></td>
<td><img src="img/d3.png" value="A3" onClick="asignar(this);"><input type="checkbox" class="ocultar chk_asiento" value="A3" onClick="asignar(this);"></td>
<td><img src="img/d4.png" value="A4" onClick="asignar(this);"><input type="checkbox" class="ocultar chk_asiento" value="A4" onClick="asignar(this);"></td>
<td><img src="img/d5.png" value="A5" onClick="asignar(this);"><input type="checkbox" class="ocultar chk_asiento" value="A5" onClick="asignar(this);"></td>
<td><img src="img/d6.png" value="A6" onClick="asignar(this);"><input type="checkbox" class="ocultar chk_asiento" value="A6" onClick="asignar(this);"></td>
<td><img src="img/d7.png" value="A7" onClick="asignar(this);"><input type="checkbox" class="ocultar chk_asiento" value="A7" onClick="asignar(this);"></td>
<td><img src="img/d8.png" value="A8" onClick="asignar(this);"><input type="checkbox" class="ocultar chk_asiento" value="A8" onClick="asignar(this);"></td>
<td><img src="img/d9.png" value="A9" onClick="asignar(this);"><input type="checkbox" class="ocultar chk_asiento" value="A9" onClick="asignar(this);"></td>
<td><img src="img/d10.png" value="A10" onClick="asignar(this);"><input type="checkbox" class="ocultar chk_asiento" value="A10" onClick="asignar(this);"></td>
<td>A</td>
</tr>
<tr>
<td>B</td>
<td><img src="img/d1.png" value="B1" onClick="asignar(this);"><input type="checkbox" class="ocultar chk_asiento" value="B1" onClick="asignar(this);"></td>
<td><img src="img/d2.png" value="B2" onClick="asignar(this);"><input type="checkbox" class="ocultar chk_asiento" value="B2" onClick="asignar(this);"></td>
<td><img src="img/d3.png" value="B3" onClick="asignar(this);"><input type="checkbox" class="ocultar chk_asiento" value="B3" onClick="asignar(this);"></td>
<td><img src="img/d4.png" value="B4" onClick="asignar(this);"><input type="checkbox" class="ocultar chk_asiento" value="B4" onClick="asignar(this);"></td>
<td><img src="img/d5.png" value="B5" onClick="asignar(this);"><input type="checkbox" class="ocultar chk_asiento" value="B5" onClick="asignar(this);"></td>
<td><img src="img/d6.png" value="B6" onClick="asignar(this);"><input type="checkbox" class="ocultar chk_asiento" value="B6" onClick="asignar(this);"></td>
<td><img src="img/d7.png" value="B7" onClick="asignar(this);"><input type="checkbox" class="ocultar chk_asiento" value="B7" onClick="asignar(this);"></td>
<td><img src="img/d8.png" value="B8" onClick="asignar(this);"><input type="checkbox" class="ocultar chk_asiento" value="B8" onClick="asignar(this);"></td>
<td><img src="img/d9.png" value="B9" onClick="asignar(this);"><input type="checkbox" class="ocultar chk_asiento" value="B9" onClick="asignar(this);"></td>
<td><img src="img/d10.png" value="B10" onClick="asignar(this);"><input type="checkbox" class="ocultar chk_asiento" value="B10" onClick="asignar(this);"></td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td><img src="img/d1.png" value="C1" onClick="asignar(this);"><input type="checkbox" class="ocultar chk_asiento" value="C1" onClick="asignar(this);"></td>
<td><img src="img/d2.png" value="C2" onClick="asignar(this);"><input type="checkbox" class="ocultar chk_asiento" value="C2" onClick="asignar(this);"></td>
<td><img src="img/d3.png" value="C3" onClick="asignar(this);"><input type="checkbox" class="ocultar chk_asiento" value="C3" onClick="asignar(this);"></td>
<td><img src="img/d4.png" value="C4" onClick="asignar(this);"><input type="checkbox" class="ocultar chk_asiento" value="C4" onClick="asignar(this);"></td>
<td><img src="img/d5.png" value="C5" onClick="asignar(this);"><input type="checkbox" class="ocultar chk_asiento" value="C5" onClick="asignar(this);"></td>
<td><img src="img/d6.png" value="C6" onClick="asignar(this);"><input type="checkbox" class="ocultar chk_asiento" value="C6" onClick="asignar(this);"></td>
<td><img src="img/d7.png" value="C7" onClick="asignar(this);"><input type="checkbox" class="ocultar chk_asiento" value="C7" onClick="asignar(this);"></td>
<td><img src="img/d8.png" value="C8" onClick="asignar(this);"><input type="checkbox" class="ocultar chk_asiento" value="C8" onClick="asignar(this);"></td>
<td><img src="img/d9.png" value="C9" onClick="asignar(this);"><input type="checkbox" class="ocultar chk_asiento" value="C9" onClick="asignar(this);"></td>
<td><img src="img/d10.png" value="C10" onClick="asignar(this);"><input type="checkbox" class="ocultar chk_asiento" value="C10" onClick="asignar(this);"></td>
<td>C</td>
</tr>
</table>

Espero haber entendido y que te ayude. Suerte.

2
  • No me entendiste bien amigo, los checkbox estan ocultos, si te fijas cada uno de ellos tiene una clase css llamada ocultar, cuando se visualiza la página solo se muestran las imágenes, hasta ahi estoy bien. El problema es que cuando doy click en una imagen no se lanza el evento onClick del checkbox y necesito que ese evento se lance para tomar su valor y guardarlo en un array el 22 nov. 2018 a las 23:44
  • De acuerdo, ahora entiendo lo que dices, hay inconveniente si agregas el mismo "value" a las imágenes?... En caso de que no haya inconvenientes modifiqué la respuesta agregando el value a las imágenes. el 23 nov. 2018 a las 0:12

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.