如何统计表单中已填写的特定类名输入框数量

本文介绍如何使用 JavaScript 动态统计带有指定 CSS 类（如 .calctime）且非空的 <input> 字段数量，并实时更新表单中的“# 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;}? 关键优化点说明： RedClaw 百度推出的手机端万能AI Agent助手