动态生成表格中基于checkbox选中状态的Balance列求和问题

问题原因 #

你的代码在计算总和时，错误地按顺序遍历所有.balance元素，而非针对选中复选框所在行的Balance值进行累加，导致无论选中哪一行，都会从第一行开始依次累加后续值。

修正方案 #

使用以下代码替换原JS逻辑，核心是通过复选框定位到所在行，再精准获取该行的Balance值：

// 为动态生成的复选框绑定change事件
$(document).on('change', 'input[type="checkbox"]', function() {
    let total = 0;
    // 遍历所有被选中的复选框
    $('input[type="checkbox"]:checked').each(function() {
        // 定位到当前复选框所在行，再获取该行的Balance文本
        const balanceText = $(this).closest('tr').find('.balance').text().trim();
        // 转换为数字，空值或非数字则按0处理
        const balance = parseFloat(balanceText) || 0;
        total += balance;
    });
    // 格式化总和为两位小数并显示
    $('#total').text(total.toFixed(2));
});

关键改进点 #

• 精准定位行：用closest('tr')获取当前复选框所在的表格行，避免跨行取值错误
• 行内查找Balance：在目标行内用find('.balance')获取对应值，确保和选中行一一对应
• 容错处理：trim()清除文本空格，parseFloat(...) || 0避免非数字内容导致NaN
• 动态事件绑定：$(document).on(...)确保后续动态生成的复选框也能触发求和逻辑

内容的提问来源于stack exchange，提问作者Ahamed Zulfan