本文介绍如何使用原生 JavaScript 替代硬编码的 jQuery 逻辑，为动态生成的学生人数输入框（.studentsNum）添加响应式自动求和与乘法计算功能，确保 #totalStudents 和 #balanceDue 实时更新，兼容任意数量字段且无需修改脚本。
本文介绍如何使用原生 javascript 替代硬编码的 jquery 逻辑，为动态生成的学生人数输入框（`.studentsnum`）添加响应式自动求和与乘法计算功能，确保 `#totalstudents` 和 `#balancedue` 实时更新，兼容任意数量字段且无需修改脚本。
表单中学生人数的自动汇总与费用计算（如按 $5/人计费）是常见需求，但原始代码存在两个关键缺陷：一是 jQuery 的 change 事件监听器硬编码了 #numStudents1 到 #numStudents5 的 ID，一旦字段增减或 ID 变更即失效；二是依赖 jQuery 库，增加了外部依赖风险。更健壮、可维护的方案应解耦逻辑与结构，通过 CSS 类选择器动态定位目标元素，并利用现代浏览器原生 API 实现高效计算。
✅ 推荐方案：原生 JavaScript + 事件委托
以下代码完全替代原有 <script> 块，无需引入 jQuery，兼容所有现代浏览器（Chrome、Firefox、Edge、Safari ≥ 15.4）：</script>
<script>
document.addEventListener('change', function(e) {
// 检查事件是否发生在 .studentsNum 输入框上
if (e.target instanceof HTMLInputElement && e.target.classList.contains('studentsNum')) {
// 获取所有 .studentsNum 元素，转换为数组并累加数值
const totalStudents = Array.from(
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;
}
});
</script>
? 关键优势说明
- 动态适配：querySelectorAll('input.studentsNum') 自动捕获所有带该类名的输入框，无论数量是 3 个还是 20 个，无需修改 JS；
- 容错性强：input.value || 0 避免空值或非数字导致 NaN；Number() 强制类型转换确保数值计算安全；
- 性能优化：使用事件委托（绑定在 document），避免为每个输入框单独绑定事件，减少内存占用；
- 零依赖：纯原生 JavaScript，不依赖 jQuery 或其他框架，降低维护成本与加载延迟。
⚠️ 注意事项与最佳实践
- 确保 DOM 加载完成：上述脚本可直接放在
