Select All Checkboxes

by LyndseyB

HTML

<ul>
  <li>
     <input type="checkbox" data-select-all="[name='items']" id="selectAll" /> 
     <label for="selectAll"> Select All </label>    
  </li>
  <li>
    <input type="checkbox" name="items" value="1" id="item1" />  
    <label for="item1">Item One</label>    
  </li> 
  <li>
    <input type="checkbox" name="items" value="2" id="item2" />  
    <label for="item2">Item Two</label>    
  </li> 
  <li>
    <input type="checkbox" name="items" value="3" id="item3" />  
    <label for="item3">Item Three</label>    
  </li>
</ul>

SCSS

ul li {
  list-style: none;
}

Babel + JSX

const selectAll = (selector = '[data-select-all]') => {
	const element = document.querySelector(selector);
  
	if(!element) {
  	throw(`No selector found: ${selector}`);
  }
  
  const checkboxes = document.querySelectorAll(element.getAttribute('data-select-all'));
  
  element.addEventListener('click', () => {
    [].forEach.call(checkboxes, (checkbox) => {
      checkbox.checked = element.checked;
    });
  });

	[].forEach.call(checkboxes, (checkbox) => {
  	checkbox.addEventListener('click', () => {
      	element.checked = [].every.call(checkboxes, c => c.checked);
    });   
  }); 
};
 
selectAll();