本文详解如何修复复选框计算器中“仅显示单个结果”的问题，通过动态收集所有选中运算、分别计算并追加显示，实现同一页面内并行输出加减乘除多个结果。
在基于复选框的 JavaScript 计算器中，常见误区是使用 = 赋值覆盖 DOM 内容（如 innerHTML = ...），导致每次只保留最后一次运算结果；同时，原代码存在逻辑缺陷：value="mult" 与条件判断 val == 'mul' 不匹配、未清空历史结果、未处理除零异常，且 msg 变量被重复拼接，造成语义混乱。
以下是优化后的完整解决方案，支持多选同时计算、结果追加显示、错误防护与清晰反馈：
✅ 正确实现要点
- 使用 += 追加结果，而非 = 覆盖；
- 遍历所有复选框，对每个 checked 项独立执行对应运算；
- 为每次运算生成独立、语义明确的结果字符串；
- 每次点击前清空结果区域（可选），避免重复累积；
- 添加输入校验与除零保护。
✅ 优化后 HTML + JavaScript 示例
多结果复选框计算器
⚠️ 关键注意事项
- 不要复用全局 msg 字符串：原代码中 msg += "The Answer of " 在循环中不断叠加，导致后续结果携带冗余前缀。应为每次运算生成独立消息。
- 严格校验 value 属性与条件匹配：如 必须对应 case 'mult'，而非 'mul'（原代码此处逻辑失效）。
- 避免隐式类型转换风险：使用 parseFloat() 替代 parseInt()，支持小数运算；并检查 isNaN()。
- 用户体验增强：添加 CSS 样式区分结果项、使用 label 包裹复选框提升可访问性、按钮设为 type="button" 防止表单默认提交。
- 扩展建议：如需持久化历史记录，可将结果推入数组并渲染；如需实时响应，可绑定 change 事件替代手动点击。
通过以上重构，你的计算器即可真正支持「多选即多算、一触全显」，结果清晰分离、逻辑健壮、符合现代 Web 开发实践。
