基于表格<td>与复选框选择的jQuery金额求和问题排查

我看了你的发票表格代码，核心问题很明确：你的计算逻辑完全没考虑复选框的选中状态，不管用户勾没勾选，两个number输入框的值都会被加进去（甚至还会出现字符串拼接的问题，比如10+12变成"1012"而不是22）。咱们来一步步修复这个问题，让计算只包含选中复选框对应的数值：

关键修改点 #

1. 给复选框添加事件监听：原来只监听了number输入框的变化，勾选/取消复选框时也要触发计算
2. 重写calculateSubtotal函数：遍历每个带复选框的数值项，只累加对应复选框被选中的数值
3. 修复克隆行的复选框状态：新克隆的行要确保复选框是未选中状态，避免继承原行的选中状态
4. 正确处理数值类型转换：把输入框的字符串值转成数字再计算，避免字符串拼接错误

修改后的完整JavaScript代码 #

// 同时监听number输入框和复选框的变化
$('table').on('mouseup keyup change', 'input[type=number], input[type=checkbox]', () => calculateTotals());
$('.btn-add-row').on('click', () => {
  const $lastRow = $('.item:last');
  const $newRow = $lastRow.clone();
  // 清空输入框值，同时重置复选框为未选中状态
  $newRow.find('input').val('').filter('input[type=checkbox]').prop('checked', false);
  $newRow.find('td:last').text('$0.00');
  $newRow.insertAfter($lastRow);
  $newRow.find('input:first').focus();
});
function calculateTotals() {
  const subtotals = $('.item').map((idx, val) => calculateSubtotal(val)).get();
  const total = subtotals.reduce((a, v) => a + Number(v), 0);
  $('.total td:eq(1)').text(formatAsCurrency(total));
}
function calculateSubtotal(row) {
  const $row = $(row);
  let subtotal = 0;
  // 遍历每个带复选框的数值组：找到每个number输入框，检查对应的复选框是否选中
  $row.find('input[type=number]').each(function() {
    const $checkbox = $(this).next('input[type=checkbox]');
    // 如果复选框被选中，就把当前数值加到小计里（空值则按0处理）
    if ($checkbox.is(':checked')) {
      subtotal += Number($(this).val()) || 0;
    }
  });
  // 乘以数量列的数值（原代码遗漏的逻辑，按需保留）
  const quantity = Number($row.find('td:nth-child(3) input[type=number]').val()) || 1;
  subtotal *= quantity;
  
  $row.find('td:last').text(formatAsCurrency(subtotal));
  return subtotal;
}
function formatAsCurrency(amount) {
  return `$${Number(amount).toFixed(2)}`;
}

额外说明 #

• 我顺便补上了数量列的计算逻辑（原代码没把数量和单价相乘，这应该是个遗漏），如果不需要可以直接去掉subtotal *= quantity这一行
• 代码里添加了|| 0的处理，避免输入框为空时出现NaN的计算错误
• 克隆行时不仅清空了输入值，还把复选框重置为未选中状态，符合新增行的预期

现在测试你的需求场景：

• 仅勾选Design复选框时，计算结果是10 * 1 = 10（保留数量计算），或者单纯10（去掉数量逻辑的话）
• 同时勾选Design与Freelencer复选框时，结果是(10+12)*1=22，完全符合你的要求

内容的提问来源于stack exchange，提问作者Bonny AUlia