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

Time:10-16

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!

CodePudding user response:

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>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

  • Related