动态表格中复选框选中行数值求和的JavaScript实现

<h2>选定发票总金额：AED <div id="totalsum">0.00</div></h2>
<table border="1" id="rcpt">
  <thead>
    <tr>
      <th><input id='selectAll' type="checkbox" /></th>
      <th>发票编号</th>
      <th>日期</th>
      <th>余额</th>
    </tr>
  </thead>
  <tbody>
    <!-- 表格行将由PHP动态生成 -->
  </tbody>
</table>

<?php
// 假设 $conn 是已建立的数据库连接
$query = 'SELECT id, cinv_no, cinv_date, cinv_bal FROM invoices'; // 示例查询
$sql = mysqli_query($conn, $query);

while ($result = mysqli_fetch_array($sql)) {
    $id = $result['id'];
    $inv_no = $result['cinv_no'];
    $inv_date = $result['cinv_date'];
    $inv_bal = $result['cinv_bal'];

    // 格式化余额用于显示，可能包含千位分隔符
    $display_bal = number_format($inv_bal, 2);
    // 格式化余额用于JavaScript计算，不含千位分隔符
    $data_bal = number_format($inv_bal, 2, '.', ''); // 例如: 56842.50

    echo '<tr>';
    // 将 data-value 属性添加到复选框，存储不含逗号的余额值
    echo '<td><input type="checkbox" class="checkbox" name="select[]" value="'.$id.'" data-value="'.$data_bal.'" /></td>';
    echo '<td>'.$inv_no.'</td>';
    echo '<td>'.date("d-m-Y", strtotime($inv_date)).'</td>';
    echo '<td class="balance">'.$display_bal.'</td>';
    echo '</tr>';
}
?>

function updateSum() {
  var total = 0;
  var select = $(".checkbox:checked"); // 获取所有选中的复选框
  var balance = $(".balance"); // 错误：获取了所有余额元素
  select.each(function() {
    // 这里依然会从所有 .balance 元素中取值，而不是当前复选框对应的行
    total += parseFloat(balance.html().replace(/,/g, ''));
  });
  $(".totalsum").html(total.toFixed(2));
}

function updateSum() {
  var total = 0;
  // 遍历所有被选中的复选框
  $(".checkbox:checked").each(function() {
    // 获取当前复选框的父级 <tr> 元素，然后在其内部查找 class 为 'balance' 的 td
    const balanceElement = $(this).parents('tr').find('.balance');
    // 提取文本内容，移除千位分隔符，转换为浮点数并累加
    total += parseFloat(balanceElement.text().replace(/,/g, ''));
  });
  $("#totalsum").text(total.toFixed(2)); // 更新总金额显示
}

// 全选/取消全选逻辑
function selectAll(source) {
  $('.checkbox').prop('checked', source.checked);
  updateSum(); // 全选/取消全选后也需要更新总和
}

// 绑定事件
$(document).ready(function() {
  // 为所有单个复选框绑定点击事件
  $('.checkbox').on('click', updateSum);
  // 为全选复选框绑定点击事件
  $('#selectAll').on('click', function() {
    selectAll(this);
  });
});

<!-- 示例HTML片段，由PHP生成 -->
<tr>
  <td><input type="checkbox" class="checkbox" name="select[]" value="2" data-value="56842.50" /></td>
  <td>INV-2020-0001</td>
  <td>31-05-2020</td>
  <td class="balance">56,842.50</td>
</tr>

// 更新总金额的函数
const updateTotal = () => {
  const total = $(".checkbox:checked") // 获取所有被选中的复选框
    .map((index, checkedCheckbox) => parseFloat(checkedCheckbox.dataset.value)) // 映射为每个复选框的 data-value 数值
    .toArray() // 将jQuery对象转换为原生数组
    .reduce((acc, cur) => acc + cur, 0); // 对数组中的所有数值进行累加
  $('#totalsum').text(total.toFixed(2)); // 更新总金额显示
};

// 全选/取消全选的函数
const toggleAll = (checked) => {
  $('.checkbox').each((index, checkbox) => {
    checkbox.checked = checked; // 设置每个复选框的选中状态
  });
};

// 文档加载完成后绑定事件
$(document).ready(function() {
  // 为所有单个复选框绑定点击事件，每次点击后更新总金额
  $('.checkbox').on('click', updateTotal);

  // 为全选复选框绑定点击事件
  $('#selectAll').on('click', function() {
    toggleAll($(this).is(':checked')); // 根据全选框状态设置所有复选框
    updateTotal(); // 更新总金额
  });

  // 页面加载时执行一次更新，确保初始显示正确
  updateTotal();
});