Browse html elements with the same class with javascript

Question

Browse html elements with the same class with javascript

Navigation

#1 by (0 votes)

1

I have the following table which contains 3 rows, in each of them I put a checkbox to which I assign a value in the value attribute, what I need to do is go through the checkboxes and determine which ones they are selected to save their values in an array and then display them in a div.

HTML code:

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

JavaScript Code:

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

With JQuery I would do it like this:

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

How could I do this using only JavaScript? Thanks for the help !!!!

javascript jquery

asked by Jorge Alonso 22.11.2018 в 21:29

source

1 answer

Class with several referenced wcf services How to show the existing username in a database with jQuery AJAX?

score 0 · Accepted Answer

Only with javascript your assign function should be like this:

Note the correction in the first line where you assign chkAsientos where in your code you are only taking the first element with [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(',');
}