本文介绍如何通过javascript监听复选框状态变化，精准汇总用户勾选的项目价格，并实时更新总金额，避免未选中项误计入的问题。
本文介绍如何通过javascript监听复选框状态变化，精准汇总用户勾选的项目价格，并实时更新总金额，避免未选中项误计入的问题。
在表单中实现“多选自动求和”功能时，常见误区是将累加变量 total 声明为全局静态变量（如 var total = 0），导致状态无法重置——例如：先勾选50元项，再取消勾选后又勾选200元项，旧值残留会使结果错误（如显示250而非200）。正确做法是每次触发求和时，重新遍历所有复选框，仅对当前已勾选项累加。
以下是完整、可直接运行的解决方案：
✅ 推荐实现（推荐使用 querySelectorAll + forEach）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>复选框自动求和</title>
</head>
<body>
<!-- 项目1：CBC 检查 -->
<label>
<input type="checkbox" class="test" value="50" data-item="CBC"> CBC（¥50）
</label><br>
<!-- 项目2：FBS 检查 -->
<label>
<input type="checkbox" class="test" value="200" data-item="FBS"> FBS（¥200）
</label><br>
<!-- 项目3：Lipid Panel -->
<label>
<input type="checkbox" class="test" value="150" data-item="Lipid"> 血脂全套（¥150）
</label><br><br>
<strong>总计：</strong><span id="amount">0</span> 元
</body>
<script>
function autoSum() {
let total = 0;
// 获取所有带 .test 类的复选框
const checkboxes = document.querySelectorAll('.test');
checkboxes.forEach(checkbox => {
if (checkbox.checked) {
total += Number(checkbox.value) || 0; // 安全转换，防 NaN
}
});
document.getElementById('amount').textContent = total;
}
// 为所有复选框绑定 change 事件（比 onclick 更语义化且兼容性更好）
document.querySelectorAll('.test').forEach(box => {
box.addEventListener('change', autoSum);
});
</script>
</html>? 关键要点说明
- 不要用全局 total 变量：每次计算都应从零开始遍历，确保结果完全反映当前勾选状态；
- 优先使用 change 事件：相比 onclick，change 在用户真正改变勾选状态后触发，更可靠（尤其支持键盘操作）；
- 使用 textContent 或 innerHTML 更新显示：示例中 更适合纯文本展示，避免XSS风险；
- 增强健壮性：Number(checkbox.value) || 0 可防止空值或非法字符串导致 NaN；
- 语义化 HTML：建议用
? 扩展建议（进阶场景）
- 若需提交到 PHP 后端，可配合隐藏域或 FormData 收集选中的 data-item（如 CBC、FBS）与对应价格；
- 如需支持小数价格（如 99.9），将 toFixed(2) 应用于最终显示：
document.getElementById('amount').textContent = total.toFixed(2); - 若项目数据来自 JSON 或 API，建议用动态渲染替代硬编码 HTML，提升可维护性。
该方案简洁、无依赖、兼容主流浏览器，适用于医疗检验单、电商选配、问卷报价等多选计价场景。
