JavaScript实例全选和反选功能实现

在web开发中，经常需要用到checkbox进行多选操作，全选和反选功能是常见的需求。下面介绍如何使用JavaScript实现全选和反选功能。

//获取全选/全不选复选框元素
var checkAll = document.getElementById("checkAll");
//获取每个选项的复选框元素
var checkboxes = document.getElementsByName("item");

//给全选/全不选复选框绑定点击事件
checkAll.onclick = function() {
  for (var i = 0; i < checkboxes.length; i++) {
    checkboxes[i].checked = this.checked;
  }
};

//给每个选项的复选框元素绑定点击事件
for (var i = 0; i < checkboxes.length; i++) {
  checkboxes[i].onclick = function() {
    var checkedCount = 0;
    for (var j = 0; j < checkboxes.length; j++) {
      if (checkboxes[j].checked) {
        checkedCount++;
      }
    }
    checkAll.checked = (checkedCount == checkboxes.length);
  }
}