统计表单中“Calctime”类输入框数量的方法如下：方法一：使用 JavaScript（原生）// 获取所有 class 为 "Calctime" 的 input 元素 const calctimeInputs = document.querySelectorAll('input.calctime'); // 统计数量 const count = calctimeInputs.length;

本文详解了如何精准统计表单中已实际填写（非空且非纯空白）的“Calctime”类输入框数量，不仅提供了原生JavaScript和jQuery两种静态计数方案，更重点展示了结合input事件的动态实时统计方法，并针对航空调度等多段行程录入场景给出实用优化：通过trim()校验有效内容、自动更新指定字段（如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 事件中调用该函数，实现动态响应（例如：<input class="calctime" oninput="sectors()">）；
• 若需兼容旧版浏览器，可将 forEach 替换为传统 for 循环，但现代项目推荐使用上述写法。

? 进阶提示：若后续需支持禁用（disabled）或只读（readonly）字段的跳过逻辑，可在条件中增加判断：!input.disabled && !input.readOnly。

该方案简洁、健壮、可维护，是表单动态计数的典型实践。

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~