本文介绍如何使用 JavaScript 动态统计带有指定 CSS 类（如 .calctime）且非空的 字段数量，并实时更新表单中的“# of Sectors”字段，适用于多段航班时间录入等场景。
本文介绍如何使用 javascript 动态统计带有指定 css 类（如 `.calctime`）且非空的 `` 字段数量，并实时更新表单中的“# of sectors”字段，适用于多段航班时间录入等场景。
在开发航空调度类表单应用时，常需支持用户灵活填写最多 8 个航段（Sector），每个航段对应一个“Block Time”输入框，并统一赋予类名 calctime。为提升数据校验与用户体验，提交前需自动计算并显示实际已填写的航段数——即所有 .calctime 输入框中 value 非空（非 null、非 undefined、非空字符串）的数量。
原始代码仅返回元素总数，未做值校验：
function sectors() {
var items = [...document.querySelectorAll('.calctime')];
document.getElementById('sector').value = items.length; // ❌ 始终返回 8
}
正确做法是遍历节点集合，逐个判断 item.value.trim() 是否为真值（推荐加 trim() 防止纯空格被误判为有效输入）：
function sectors() {
const calctimeInputs = document.querySelectorAll('.calctime');
let filledCount = 0;
calctimeInputs.forEach(input => {
if (input.value && input.value.trim() !== '') {
filledCount++;
}
});
document.getElementById('sector').value = filledCount;
}
✅ 关键优化点说明：
- 使用 querySelectorAll 返回的静态 NodeList 可直接遍历，无需转为数组（但若需链式调用如 filter()，可写为 [...calctimeInputs]）；
- input.value.trim() !== '' 比单纯 if (input.value) 更健壮，避免用户误输空格导致逻辑错误；
- 推荐将该函数绑定至输入事件，实现实时响应（例如在每个 .calctime 输入框添加 oninput="sectors()"），或在表单 submit 前调用，确保数据一致性。
⚠️ 注意事项：
- 确保目标元素存在且 ID sector 对应的是 或 等可写入值的表单控件；
- 若输入框类型为 type="number"，空值时 value 为 ""（空字符串），仍适用上述判断；
- 在 Vue/React 等框架中，应优先使用响应式数据绑定而非直接操作 DOM，此处方案适用于原生 HTML + JS 场景。
通过这一轻量级逻辑，您即可精准反馈用户真实填写的航段数量，为后续业务逻辑（如动态生成报告、校验必填项）提供可靠依据。
