javascriptarraysforeachelementhtmlcollection

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

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!

Solution

  • 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>