Launch event of a hidden element html

Navigation
0

I have this html table: 

<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>

As you can see inside each cell I have an image and a checkbox that I have hidden display: none; what I need is that when you click on the image the event is launched > onClick that has the checkbox to take its value and save it in an array, how could this be done. I will not use JQuery only JavaScript.

Asking me they told me that instead of hiding the checkbox I gave an opacity of 0, I did it but it did not work that I could have wrong?

    
asked by Jorge Alonso 23.11.2018 в 00:32
source

1 answer

0

If what you need is just to save the value in an array when selecting an image then you just need to give push to an array that you declare, you can assign the value to the images and send it to call the event onClick , I show you an example: 

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>

I hope I have understood and that it will help you. Good luck.

    
answered by 23.11.2018 / 00:36
source
FILL IN MULTIPLE RECYCLERVIEW WITH FIREBASE, ERROR ANDROID STUDIO Add row to table query html in php