如何检查HTMLCollection中所有元素的某个属性是否均为指定值

你当前的写法把判断逻辑放在forEach的遍历回调里，是无法实现「判断整个集合所有元素属性是否全部符合要求」的需求的，forEach仅用于遍历每个元素执行单独逻辑，集合整体的校验需要单独处理。

场景1：判断所有元素的指定属性都等于某个固定值（比如所有checked为true） #

HTMLCollection是类数组对象，需要先转为普通数组，再用数组的every()方法做全量校验：

// 先把HTMLCollection转为普通数组，再做全量校验
const isAllChecked = Array.from(elements).every(element => element.checked === true)

if (isAllChecked) {
  // 所有元素checked都为true时执行的逻辑
}

场景2：判断所有元素的指定属性值完全相同（不限定具体值，全true/全false都算符合） #

取集合第一个元素的属性值作为基准，所有后续元素和基准值对比即可：

// 先处理空集合的边界情况，可根据自己的需求调整逻辑
if (elements.length === 0) {
  console.log('集合为空，无元素需要校验')
} else {
  const targetValue = elements[0].checked
  const isAllSame = Array.from(elements).every(element => element.checked === targetValue)
  
  if (isAllSame) {
    // 所有元素checked属性值一致时执行的逻辑
  }
}

注意事项 #

如果你要校验的是HTML标签上的自定义属性（而非DOM元素的内置property），需要用getAttribute()方法读取：

// 示例：判断所有元素的data-type属性都等于"input"
const isAllSameType = Array.from(elements).every(element => element.getAttribute('data-type') === 'input')

内容的提问来源于stack exchange，提问作者Ralph David Abernathy