本文介绍如何通过 JavaScript 动态统计具有特定 CSS 类（如 calctime）且值非空的表单输入框数量，并实时更新到指定字段，适用于多段行程（Sector）时间录入等场景。
本文介绍如何通过 javascript 动态统计具有特定 css 类（如 `calctime`）且值非空的表单输入框数量，并实时更新到指定字段，适用于多段行程（sector）时间录入等场景。
在开发航空调度类应用时，常需支持用户灵活录入最多 8 段航程（Sector），每段对应一个“Block Time”输入框，统一赋予 class="calctime"。提交前，系统需自动计算并显示实际已填写的航段数（即非空的 .calctime 输入框个数），而非固定总数。原始代码 items.length 返回的是元素数量（恒为 8），无法反映真实填写状态。
正确做法是遍历所有匹配元素，逐个校验其 value 属性是否为非空字符串。注意：应使用 item.value.trim() !== '' 更严谨地排除仅含空白字符的情况（如空格、制表符），避免误判。
以下是优化后的完整函数：
function sectors() {
const timeInputs = document.querySelectorAll('.calctime');
let filledCount = 0;
timeInputs.forEach(input => {
if (input.value && input.value.trim() !== '') {
filledCount++;
}
});
document.getElementById('sector').value = filledCount;
}
✅ 关键说明：
- 使用 document.querySelectorAll('.calctime') 获取所有目标输入框（返回 NodeList，可直接遍历，无需转为数组）；
- input.value.trim() !== '' 确保过滤掉纯空白内容，提升数据可靠性；
- 建议在表单 input 或 blur 事件中调用该函数，实现动态响应（例如：）；
- 若需兼容旧版浏览器，可将 forEach 替换为传统 for 循环，但现代项目推荐使用上述写法。
? 进阶提示：若后续需支持禁用（disabled）或只读（readonly）字段的跳过逻辑，可在条件中增加判断：!input.disabled && !input.readOnly。
该方案简洁、健壮、可维护，是表单动态计数的典型实践。
