如何遍历返回input元素或RadioNodeList的同名复选框？

当表单内的复选框（统一命名为countrycode）数量不确定时（0个、1个或多个），直接遍历e.target.countrycode会出现兼容问题：仅存在1个复选框时，它返回单个DOM元素；存在多个时返回RadioNodeList，普通的for...of遍历单个元素会报错。

下面提供几种可靠的解决思路：

方案1：统一转为数组处理 #

用Array.from()将目标元素（不管是单个DOM元素还是RadioNodeList）转换成数组，后续遍历逻辑完全统一，同时兼容0个元素的情况。

修改后的JavaScript代码：

document.addEventListener('submit', e => {
  e.preventDefault();
  // 转为数组，无元素时返回空数组
  const checkboxes = Array.from(e.target.countrycode || []);
  checkboxes.forEach(input => {
    input.checked = true;
  });
});

方案2：条件判断区分元素类型 #

判断获取到的对象是否具备forEach方法（NodeList自带该方法，单个DOM元素没有），以此区分是单个元素还是集合，分别处理。

代码示例：

document.addEventListener('submit', e => {
  e.preventDefault();
  const elements = e.target.countrycode;
  if (elements?.forEach) {
    // 是元素集合，遍历设置选中
    elements.forEach(input => input.checked = true);
  } else if (elements) {
    // 是单个元素，直接设置
    elements.checked = true;
  }
});

方案3：用querySelectorAll统一获取元素 #

直接通过表单的querySelectorAll选择所有name="countrycode"的复选框，它始终返回NodeList（即使只有0个或1个元素），遍历逻辑无需做兼容处理。

代码示例：

document.addEventListener('submit', e => {
  e.preventDefault();
  // 直接选中所有目标复选框
  const checkboxes = e.target.querySelectorAll('input[name="countrycode"]');
  for (const input of checkboxes) {
    input.checked = true;
  }
});

完整示例代码 #

HTML

<form name="form01">
  <label><input type="checkbox" value="1" name="countrycode">Item 1</label>
  <label><input type="checkbox" value="2" name="countrycode">Item 2</label>
  <label><input type="checkbox" value="3" name="countrycode">Item 3</label>
  <label><button type="submit">Check all</button></label>
</form>

<form name="form02">
  <label><input type="checkbox" value="1" name="countrycode">Item 1</label>
  <label><button type="submit">Check all</button></label>
</form>

CSS

form {
  display: flex;
  flex-direction: column;
  margin-bottom: 1em;
}

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