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

本文介绍如何使用 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助手