动态表格复选框值求和教程

<h1>发票列表</h1>
<h2>已选发票总金额：AED <span id="totalsum">0.00</span></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_table'; // 示例查询
$sql = mysqli_query($conn, $query);

if ($sql) {
    while ($result = mysqli_fetch_array($sql)) {
        $id = htmlspecialchars($result['id']);
        $inv_no = htmlspecialchars($result['cinv_no']);
        $inv_date = date("d-m-Y", strtotime($result['cinv_date']));
        $inv_bal = number_format($result['cinv_bal'], 2); // 格式化余额，保留两位小数

        echo '<tr>';
        // 注意：这里可以为复选框添加 data-value 属性，以便后续优化
        echo '<td><input type="checkbox" class="checkbox" name="select[]" value="' . $id . '" data-value="' . htmlspecialchars($result['cinv_bal']) . '" /></td>';
        echo '<td>' . $inv_no . '</td>';
        echo '<td>' . $inv_date . '</td>';
        echo '<td class="balance">' . $inv_bal . '</td>';
        echo '</tr>';
    }
} else {
    echo '<tr><td colspan="4">查询失败或无数据。</td></tr>';
}
?>

// 假设的初始（错误）的 updateSum 函数
function updateSum_incorrect() {
    var total = 0;
    var select = $(".checkbox:checked"); // 选中所有被勾选的复选框
    var balance = $(".balance");         // 选中所有余额单元格

    // 问题所在：这里遍历的是选中的复选框，但却试图使用所有 .balance 元素的HTML内容
    // 导致无论哪个复选框被选中，它总是从第一个 .balance 元素开始取值，而不是对应行的值
    select.each(function() {
        total += parseFloat(balance.html().replace(/,/g, ''));
    });
    $("#totalsum").html(total.toFixed(2));
}

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

// 全选/取消全选功能
function toggleAll(sourceCheckbox) {
  $('.checkbox').prop('checked', sourceCheckbox.checked);
  updateSum(); // 全选/取消全选后也需要更新总和
}

// 事件绑定
$(document).ready(function() {
  // 为每个复选框绑定点击事件
  $('.checkbox').on('click', updateSum);
  // 为全选复选框绑定点击事件
  $('#selectAll').on('click', function() {
    toggleAll(this);
  });
  // 页面加载时初始化总和
  updateSum();
});

<!-- 示例行，data-value 存储了原始余额 -->
<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(function() {
      // 从每个被勾选的复选框的 data-value 属性中获取余额值
      return parseFloat($(this).data('value'));
    })
    .toArray() // 将jQuery对象转换为原生数组
    .reduce((accumulator, currentValue) => accumulator + currentValue, 0); // 使用reduce方法求和

  $('#totalsum').text(total.toFixed(2)); // 更新总和显示
};

// 全选/取消全选的函数
const toggleAll = (checked) => {
  $('.checkbox').prop('checked', checked);
};

// 事件绑定
$(document).ready(function() {
  // 为每个普通复选框绑定点击事件，每次点击都更新总和
  $('.checkbox').on('click', updateTotal);

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

  // 页面加载时初始化总和
  updateTotal();
});