select all checkbox

by Fooleap Chen

HTML

<label>
  <input class="checkbox" type="checkbox" /> 选择框 1</label>
<label>
  <input class="checkbox" type="checkbox" /> 选择框 2</label>
<label>
  <input class="checkbox" type="checkbox" /> 选择框 3</label>
<label>
  <input class="checkbox" type="checkbox" /> 选择框 4</label>
<label>
  <input class="checkbox" type="checkbox" /> 选择框 5</label>
<label>
  <input id="selectAll" type="checkbox" /> 全选</label>

JavaScript

var checkboxes = document.getElementsByClassName('checkbox');
document.getElementById('selectAll').addEventListener('change', function(e) {
  for (var i = 0; i < checkboxes.length; i++) {
    checkboxes[i].checked = e.target.checked;
  }
}, false)
for (var i = 0; i < checkboxes.length; i++) {
  checkboxes[i].addEventListener('change', function(e) {
    var checked = true;
    for (var n = 0; n < checkboxes.length; n++) {
      if (!checkboxes[n].checked) {
        checked = false;
      }
    }
    document.getElementById('selectAll').checked = checked;
  }, false)
}