check/uncheck with pure js

Separate buttons

by Mahadevan Sivasubramanian

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<form>
  <div>
    <input type="button" onclick="checkAll()" class="btn btn-link" value="Check All">
    <input type="button" onclick="uncheckAll()" class="btn btn-link" value="Uncheck All">
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox" class="check"> Check me out
    </label>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox" checked class="check"> Check me out
    </label>
  </div>
  <div class="checkbox">
    <label>
      <input type="checkbox" class="check"> Check me out
    </label>
  </div>
</form>

JavaScript

function checkAll() {
  var inputs = document.querySelectorAll('.check');
  for(var i = 0; i < inputs.length; i++) {
    inputs[i].checked = true;
  }
}

function uncheckAll() {
  var inputs = document.querySelectorAll('.check');
  for(var i = 0; i < inputs.length; i++) {
    inputs[i].checked = false;
  }
}

window.onload = function() {
  window.addEventListener('load', checkAll, false);
}