2

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

1 respuesta 1

2

Sólo con javascript tu función asignar deberia ser así:

Nótese la corrección en la primera línea donde asignas chkAsientos donde en tu código sólo estás tomando el primero elemento con [0]

var chkAsientos = document.getElementsByClassName("chk_asiento");
var divAsientos = document.getElementById("div_asientos");

function asignar(){
    var asientos = [];
    for(i=0;i<chkAsientos.length;i++)
        if(chkAsientos[i].checked)
            asientos.push(chkAsientos[i].value);
    divAsientos.innerHTML = "<b>Tus asientos:</b> "+asientos.join(',');
}

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.