Are they all checked?

Simplest way to check whether all checkbox input fields checked or not

by Mahmoud Elmahdi

HTML

<link rel="stylesheet" href="https://bootswatch.com/4/flatly/bootstrap.min.css">
<div class="container container-demo">
  <h1>Are they all checked?</h1>
  <hr/>
  <div class="form-check">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox" name="demo" />E-Reader
    </label>
  </div>
  <div class="form-check">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox" name="demo" />Tablet
    </label>
  </div>
  <div class="form-check">
    <label class="form-check-label">
      <input class="form-check-input" type="checkbox" name="demo" />Other Devices
    </label>
  </div>
  <hr/>
  <button class="btn btn-primary" type="button">Filter</button>
</div>

CSS

// Credits to Bootswatch - Thomas Park: Bootstrap Flatly theme
body {
  padding-top: 30px;
}

Babel + JSX

const areAllChecked = () => {
  return [...document.querySelectorAll('input[name="demo"]')].every(checkbox => checkbox.checked);
};

document.querySelector('button').addEventListener('click', () => {
  alert(areAllChecked() ? 'Yay...' : 'nope...')
});