本文介绍如何修复因硬编码导致失效的表单自动汇总功能，使用现代原生 javascript 实现动态监听、灵活求和与实时计算，兼容任意数量字段，无需依赖 jquery。

本文介绍如何修复因硬编码导致失效的表单自动汇总功能，使用现代原生 javascript 实现动态监听、灵活求和与实时计算，兼容任意数量字段，无需依赖 jquery。

在表单开发中，当需要对多个输入框（如各班级学生人数）进行实时求和并基于单价（如 $5/人）自动计算总金额时，常见的错误是将 DOM 元素 ID 硬编码进 JavaScript 逻辑中（例如 $("#numStudents1").val()）。一旦字段结构变动、数量增减或页面加载时机异常，这类代码极易失效——正如您遇到的情况：原本正常工作的自动汇总突然停止响应。

为从根本上提升健壮性与可维护性，推荐采用事件委托 + 类选择器 + 函数式聚合的方式，完全脱离对具体 ID 的依赖。以下是优化后的完整解决方案：

✅ 推荐实现（原生 JavaScript，无 jQuery 依赖）

<script>
document.addEventListener('change', function(e) {
  // 仅当变更发生在 .studentsNum 输入框时触发处理
  if (e.target instanceof HTMLInputElement && e.target.classList.contains('studentsNum')) {
    // 获取所有 .studentsNum 元素，安全转换值为数字并累加（空值/非数转为 0）
    const sum = Array.from(document.querySelectorAll('input.studentsNum'))
      .reduce((acc, input) => acc + (Number(input.value) || 0), 0);

    // 同步更新总计与费用
    document.getElementById('totalStudents').value = sum;
    document.getElementById('balanceDue').value = sum * 5;
  }
});
</script>

该方案优势显著：

• 动态适配：无论新增第 6 个还是第 20 个 studentsNum 字段，无需修改 JS；
• 容错性强：Number(input.value) || 0 自动处理空值、非数字输入，避免 NaN 污染结果；
• 性能友好：使用原生 addEventListener 和 querySelectorAll，轻量高效；
• 解耦清晰：HTML 结构与 JS 逻辑完全分离，便于后续维护或重构。

⚠️ 注意事项与最佳实践

• 确保 DOM 已就绪：上述脚本应置于