Tengo la siguiente tabla la cual contiene 3 filas, en cada una de ellas puse un checkbox al cual le asigno un valor en el atributo value, lo que necesito hacer es recorrer los checkbox y determinar cuales están seleccionados para guardar sus valores en un array y posteriormente mostrarlos en un div.
Código html:
<table>
<tr>
<td>A</td>
<td>A1<input type="checkbox" class="chk_asiento" value="A1"></td>
<td>A2<input type="checkbox" class="chk_asiento" value="A2"></td>
<td>A3<input type="checkbox" class="chk_asiento" value="A3"></td>
<td>A4<input type="checkbox" class="chk_asiento" value="A4"></td>
<td>A5<input type="checkbox" class="chk_asiento" value="A5"></td>
<td>A6<input type="checkbox" class="chk_asiento" value="A6"></td>
<td>A7<input type="checkbox" class="chk_asiento" value="A7"></td>
<td>A8<input type="checkbox" class="chk_asiento" value="A8"></td>
<td>A9<input type="checkbox" class="chk_asiento" value="A9"></td>
<td>A10<input type="checkbox" class="chk_asiento" value="A10"></td>
<td>A</td>
</tr>
<tr>
<td>B</td>
<td>B1<input type="checkbox" class="chk_asiento" value="B1"></td>
<td>B2<input type="checkbox" class="chk_asiento" value="B2"></td>
<td>B3<input type="checkbox" class="chk_asiento" value="B3"></td>
<td>B4<input type="checkbox" class="chk_asiento" value="B4"></td>
<td>B5<input type="checkbox" class="chk_asiento" value="B5"></td>
<td>B6<input type="checkbox" class="chk_asiento" value="B6"></td>
<td>B7<input type="checkbox" class="chk_asiento" value="B7"></td>
<td>B8<input type="checkbox" class="chk_asiento" value="B8"></td>
<td>B9<input type="checkbox" class="chk_asiento" value="B9"></td>
<td>B10<input type="checkbox" class="chk_asiento" value="B10"></td>
<td>B</td>
</tr>
<tr>
<td>C</td>
<td>C1<input type="checkbox" class="chk_asiento" value="C1"></td>
<td>C2<input type="checkbox" class="chk_asiento" value="C2"></td>
<td>C3<input type="checkbox" class="chk_asiento" value="C3"></td>
<td>C4<input type="checkbox" class="chk_asiento" value="C4"></td>
<td>C5<input type="checkbox" class="chk_asiento" value="C5"></td>
<td>C6<input type="checkbox" class="chk_asiento" value="C6"></td>
<td>C7<input type="checkbox" class="chk_asiento" value="C7"></td>
<td>C8<input type="checkbox" class="chk_asiento" value="C8"></td>
<td>C9<input type="checkbox" class="chk_asiento" value="C9"></td>
<td>C10<input type="checkbox" class="chk_asiento" value="C10"></td>
<td>C</td>
</tr>
</table>
Código JavaScript:
<script>
var chkAsientos = document.getElementsByClassName("chk_asiento")[0];
var divAsientos = document.getElementById("div_asientos");
var asientos = [];
function asignar()
{
chkAsientos.forEach(function(){
if(this.checked)
asientos.push(this.value);
});
divAsientos.innerHTML = "<b>Tus asientos:</b> ";
var lugares = "";
for(var i = 0; i < asientos.length; i++)
{
if(lugares == "")
lugares = asientos[i];
else
lugares = lugares + ", " + asientos[i];
}
divAsientos.innerHTML += lugares;
}
</script>
Con JQuery lo haria asi:
<script>
var asientos = [];
function asignar()
{
$(".chk_asiento").each(function()
{
if($(this).prop('checked'))
asientos.push($(this).val());
});
var titulo = "<b>Tus asientos:</b> ";
var lugares = "";
for(var i = 0; i < asientos.length; i++)
{
if(lugares == "")
lugares = asientos[i];
else
lugares = lugares + ", " + asientos[i];
}
$("#div_asientos").html(titulo + lugares);
}
</script>
Como podria hacer esto usando solo JavaScript?? Gracias por la ayuda!!!!