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) }
<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>