如何统计页面中选中的HTML复选框数量？现有代码失效求助

问题排查 #

• 循环边界错误：原代码循环条件用了i <= extra.length，由于querySelectorAll返回的NodeList索引从0开始，当i等于extra.length时，extra[i]为undefined，访问checked属性会直接抛出错误，导致函数终止。正确条件应为i < extra.length。
• 未定义变量报错：代码中console.log(toppings.value);里的toppings未声明，触发ReferenceError，中断函数执行。
• 无结果输出：函数内部计算了count但未打印或返回结果，无法获取统计数值。

正确实现方法 #

方法1：修复原循环逻辑

const extra = document.querySelectorAll(".extra");

const myfunction = (extra) => {
  let count = 0;
  // 修正循环边界，移除未定义的代码
  for (let i = 0; i < extra.length; i++) {
    if (extra[i].checked) {
      count++;
    }
  }
  console.log("选中的复选框数量：", count);
  return count; // 可选：返回结果供其他逻辑调用
};

myfunction(extra);

方法2：使用数组过滤（更简洁）

利用Array.from将NodeList转为数组，再通过filter筛选出选中的复选框，直接取数组长度：

const extra = document.querySelectorAll(".extra");

const getCheckedCount = () => {
  const count = Array.from(extra).filter(item => item.checked).length;
  console.log("选中的复选框数量：", count);
  return count;
};

getCheckedCount();

方法3：使用forEach遍历

const extra = document.querySelectorAll(".extra");

const getCheckedCount = () => {
  let count = 0;
  extra.forEach(item => {
    if (item.checked) count++;
  });
  console.log("选中的复选框数量：", count);
  return count;
};

getCheckedCount();

内容的提问来源于stack exchange，提问作者Hasan