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

Al pulsar en “Publica tu respuesta”, muestras tu consentimiento a nuestros términos de servicio, política de privacidad y política de cookies

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