Calculate the total of a table column based on the checkbox by taking only the selected ones

Question

I have the following table:

  <div class="table-responsive">
    <form class="form-inline" action="registrosVazios.php" method="GET">
      <table id="tabelaCupons" class="table table-condensed table-bordered table-striped" border="1px" bordercolor="#000000">
        <thead>

          <tr>
            <th style="text-align:center;width: 10px">
              <input type="checkbox" name="chkAll" onClick="checkAll(this)" />
            </th>
            <th style="text-align:center;vertical-align:middle;">
              DATA
            </th>
            <th style="text-align:center;vertical-align:middle;">
              PDV
            </th>
            <th style="text-align:center;vertical-align:middle;">
              CUPOM
            </th>
            <th style="text-align:center;vertical-align:middle;">
              VALOR
            </th>
          </tr>
        </thead>
        <tbody>
          <?php 
          if (mysqli_num_rows($resultImportaPdv) > 0) {
            while($row = mysqli_fetch_assoc($resultImportaPdv)) { ?>       
            <tr>
              <td  style='height:5px;text-align:center'>
                <input type='checkbox' id='<?php echo $row["ie_cupom"]; ?>' name='<?php echo $row["ie_cupom"]; ?>' value='<?php echo $row["ie_cupom"]; ?>' onClick="verCheck()" >
              </td>
              <td  style="height:5px;text-align:center;">
                <?php echo date_format (new DateTime($row["ie_data"]), 'd/m/Y'); ?>
              </td>
              <td  style="height:5px;text-align:center;">
                <?php echo $row["ie_pdv"]; ?>
              </td>
              <td  style="height:5px;text-align:center;">
                <?php echo $row["ie_cupom"]; ?>
              </td>
              <td style="height:5px;text-align:center;">
                <?php echo round($row["ie_valor"],2); ?>
              </td>
            </tr>
          </div>
        </div>
        <?php 
      }
    } else {
      echo "0 registros";
    }
    ?>
  </tbody>
</table>

She has it this way:

what I need, when I mark with checkbox he calculate the total column value

                   <td style="height:5px;text-align:center;">
                    <?php echo round($row["ie_valor"],2); ?>
                  </td>  

only those who are checked.

Does anyone know how I can do, remembering that the name of the checkbox might be different, and I need to keep it that way.

Expected Final Result:

Answer 1

To facilitate the process I chose to add the class check at checkbox and a class total in the columns of totals.

For each checkbox the logic to apply is:

• Set the event change
• In this event find all checkboxs selected at the expense of the selector .check:checked
• For each found checkbox navigate to the total using closest and querySelector
• Interpret the value with parseFloat and adds it to the total
• Show the total if there are selected checkboxes or 0 otherwise

Implementation:

const checks = document.querySelectorAll(".check");
const divtotal = document.getElementById("total");

for (let i = 0; i < checks.length; ++i){ //para cada checkbox
  checks[i].addEventListener("change", function(){//definir código para o evento change
    //buscar só os checks selecionados
    const checksSelecionados = document.querySelectorAll(".check:checked");
    let total = 0;
  
    checksSelecionados.forEach(c => { //para cada check selecionado
      let trValor = c.closest("tr").querySelector(".valor"); //achar o tr com o valor
      total += parseFloat(trValor.innerHTML); //transformar em numero e somar ao total 
    });
    
    divtotal.innerHTML = "Total :" + total.toFixed(2); //mostrar o total
  });
}

<div class="table-responsive">
    <form class="form-inline" action="registrosVazios.php" method="GET">
      <table id="tabelaCupons" class="table table-condensed table-bordered table-striped" border="1px" bordercolor="#000000">
        <thead>

          <tr>
            <th style="text-align:center;width: 10px">
              <input type="checkbox" name="chkAll" />
            </th>
            <th style="text-align:center;vertical-align:middle;">
              DATA
            </th>
            <th style="text-align:center;vertical-align:middle;">
              PDV
            </th>
            <th style="text-align:center;vertical-align:middle;">
              CUPOM
            </th>
            <th style="text-align:center;vertical-align:middle;">
              VALOR
            </th>
          </tr>
        </thead>
        <tbody>
         
            <tr>
              <td  style='height:5px;text-align:center'>
                <input type='checkbox' class="check" >
              </td>
              <td  style="height:5px;text-align:center;">
                data
              </td>
              <td  style="height:5px;text-align:center;">
                pdv
              </td>
              <td  style="height:5px;text-align:center;">
                cupom
              </td>
              <td style="height:5px;text-align:center;" class="valor">
                15.50
              </td>
            </tr>
            
             <tr>
              <td  style='height:5px;text-align:center'>
                <input type='checkbox' class="check" >
              </td>
              <td  style="height:5px;text-align:center;">
                data
              </td>
              <td  style="height:5px;text-align:center;">
                pdv
              </td>
              <td  style="height:5px;text-align:center;">
                cupom
              </td>
              <td style="height:5px;text-align:center;" class="valor">
                39.12
              </td>
            </tr>
            
             <tr>
              <td  style='height:5px;text-align:center'>
                <input type='checkbox' class="check" >
              </td>
              <td  style="height:5px;text-align:center;">
                data
              </td>
              <td  style="height:5px;text-align:center;">
                pdv
              </td>
              <td  style="height:5px;text-align:center;">
                cupom
              </td>
              <td style="height:5px;text-align:center;" class="valor">
                4.70
              </td>
            </tr>
            
             <tr>
              <td  style='height:5px;text-align:center'>
                <input type='checkbox' class="check" >
              </td>
              <td  style="height:5px;text-align:center;">
                data
              </td>
              <td  style="height:5px;text-align:center;">
                pdv
              </td>
              <td  style="height:5px;text-align:center;">
                cupom
              </td>
              <td style="height:5px;text-align:center;" class="valor">
                2.78
              </td>
            </tr>

        
  </tbody>
</table>
<br>
<div id="total"></div>

Documentation:

• closest
• querySelector
• querySelectorAll