本文详解如何用 javascript 构建支持多选运算（加、减、乘、除）的复选框计算器，解决原代码仅显示单个结果、覆盖输出、逻辑错误等问题，实现所有选中运算结果并列展示于同一页面。
在传统复选框计算器开发中，一个常见误区是将 document.getElementById('p1').innerHTML = ... 写在每个分支内——这会导致后执行的运算覆盖先执行的结果，最终只显示最后一次计算的值。此外，原始代码中存在关键拼写错误（如 mul 与 HTML 中 mult 不匹配）、未处理除零异常、未清空历史结果导致重复累加，以及使用 += 与 = 混用造成显示混乱。
要真正实现“多选即多算、多算即多显”，核心思路是：逐项遍历所有被勾选的复选框，分别计算对应结果，并统一收集、格式化后一次性写入 DOM，而非边算边写。
以下是优化后的完整可运行代码：
多选复选框计算器
✅ 关键改进点说明：
立即学习“Java免费学习笔记（深入）”；
- 结果不覆盖：使用数组 results[] 缓存所有运算结果，最后统一 innerHTML = results.join('')，彻底避免 DOM 频繁写入与覆盖；
- 修复逻辑错误：修正 mult → mult（原代码误写为 mul），确保 checkbox value 与 JS 判断完全一致；
- 健壮性增强：添加 NaN 输入检测、除零保护、空选项提示；
- 用户体验优化：支持 Enter 键快速计算、运算符 Unicode 符号（× ÷ −）、CSS 样式隔离、响应式结构；
- 性能考量：单次 DOM 更新，减少浏览器重排重绘。
? 注意事项：
- 勿在循环中直接操作 innerHTML +=，尤其在需保留历史内容时，应先收集再批量渲染；
- 使用 parseFloat() 替代 parseInt() 更合理，支持小数运算；
- 复选框建议包裹
- 生产环境建议将计算逻辑抽离为纯函数（如 performOperation(n1, n2, op)），便于单元测试。
通过以上重构，你将获得一个真正符合 Web 标准、可维护性强、且能同时展示多项运算结果的专业级复选框计算器。
