How to check if all elements in an HTMLCollection contain a certain value for a property?

user_2127769 0
Viewed 202

I'm looping over a HTMLCollection like this:

elements.forEach((element) => {

  // If all elements in the collection have a "checked" property of "true"
  if (?) { // Not sure what the check should be here, something like `element.checked.every(Boolean)`?
    // Do stuff
  }
});

Is it possible to write a check to determine if all the children have an property with the same value? Thanks!

htmlcollection element foreach arrays javascript
1 Answers

You can use spread syntax to convert the NodeList/HTMLCollection to an array, then use Array.every to check whether each item in the array matches the condition in the callback:

const res = [...document.querySelectorAll('input')].every(e => e.checked)
console.log('All checkboxes checked?', res)
<input type="checkbox" checked>
<input type="checkbox" checked>
<input type="checkbox" checked>

user_142512210
Related