表单里需要动态统计学生人数，再乘以单价自动算出总金额，这种需求在后台管理系统中非常普遍。但很多开发者习惯性写出的代码，往往隐藏着维护隐患：比如使用jQuery硬编码多个ID选择器，或者将计算逻辑与页面结构紧密耦合。

今天，我们就来解析一个更优雅的纯JavaScript方案。它不依赖任何外部库，借助事件委托与函数式编程思路，实现一个健壮、易扩展的自动计算功能。

✅ 推荐方案：事件委托 + 动态查询 + 函数式求和

核心思路非常直观：我们无需关心页面上有多少个输入框，也不必为每个框单独绑定事件。只需监听整个文档的change事件，判断触发元素是否属于目标输入框类别，一旦匹配就重新计算总和。

具体实现时，我们利用document.querySelectorAll的动态查询能力。无论页面中的.studentsNum类输入框是5个还是50个，这段代码都能精准获取。求和部分采用reduce方法一行解决，它天然将空字符串或非数字输入转化为0，省去了额外的错误处理逻辑。

document.addEventListener('change', function(e) {
  // 仅响应 .studentsNum 输入框的 change 事件
  if (e.target instanceof HTMLInputElement && e.target.classList.contains('studentsNum')) {
    // 动态获取所有学生人数输入框，安全求和（空值或非数字返回 0）
    const totalStudents = [...document.querySelectorAll('input.studentsNum')]
      .reduce((sum, input) => sum + Number(input.value || 0), 0);
    // 实时更新总计与应付金额（$5/人）
    document.getElementById('totalStudents').value = totalStudents;
    document.getElementById('balanceDue').value = totalStudents * 5;
  }
});

⚠️ 注意事项与最佳实践

方案的核心代码虽简洁，但投入生产环境时，有几个细节值得留意。

输入验证的平衡：上述代码利用Number('')返回0的特性，已具备基础容错能力。若业务要求更严格，如禁止负数或设定上限，建议优先在HTML输入标签上使用min和max属性进行原生约束，这比用JavaScript拦截更直接，用户体验也更佳。

初始状态的同步：页面加载后，若某些输入框已有预填值（例如从数据库回显的数据），需要主动触发一次计算来初始化总计金额。一个简单方法是在脚本末尾模拟触发一次change事件：

// 页面就绪后立即计算一次，确保初始值正确
setTimeout(() => {
  const event = new Event('change');
  document.querySelector('input.studentsNum')?.dispatchEvent(event);
}, 100);

性能与兼容性：完全不必担心性能问题。即使表单扩展到几十个字段，querySelectorAll和一次数组遍历的消耗也微乎其微。在兼容性方面，主要方法支持IE11及以上版本。若需兼容更老旧的浏览器，将reduce替换为传统for循环即可。

✅ 为什么优于原始 jQuery 方案？

将上面的JavaScript片段放入