javascript 复选框（checkbox）全选/全不选/反选
其实很简单，先分析一下
效果分析：
1，点击全选/全不选
全选文字变成全不选，同时全选按钮和所有按钮选中状态，否则，则相反
2，点击反选按钮
没有选中的按钮变成选中状态，选中的按钮变成未选中
实现方式：
1，点击全选复选框
判断点击的按钮是否为选中状态this.checked = true/false;
true：设置所有复选框为选中状态
false：设置所有复选框为未选中状态
根据为true/false改变点击按钮的文字
2，点击反选
对所有复选框进行遍历，判断每一个复选框是否是选中状态input[i].checked = true/false;
true：设置选中状态的为未选中状态
false：设置未选中状态的为选中状态
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>复选框（checkbox）全选/全不选/反选</title>
<style>
dl {
width: 300px;
margin: 30px auto;
}
dd {
margin: 10px;
}
</style>
</head>
<body>
<center>1、切换全选/全不选文字；2、根据选中个数更新全选框状态；</center>
<dl>
<dt>
<label for="checkall"> <input type="checkbox" id="checkall"><span>全选</span></label>
<label for="invertcheckall"> <input type="checkbox" id="invertcheckall">反选</label>
</dt>
<dd><input type="checkbox" class="item">选项（1） </dd>
<dd><input type="checkbox" class="item">选项（2） </dd>
<dd><input type="checkbox" class="item">选项（3） </dd>
<dd><input type="checkbox" class="item">选项（4） </dd>
<dd><input type="checkbox" class="item">选项（5） </dd>
<dd><input type="checkbox" class="item">选项（6） </dd>
<dd><input type="checkbox" class="item">选项（7） </dd>
<dd><input type="checkbox" class="item">选项（8） </dd>
<dd><input type="checkbox" class="item">选项（9） </dd>
</dl>
<script type="text/javascript">
var all = document.getElementById('checkall');
var invertBtn = document.getElementById('invertcheckall');
var input = document.querySelectorAll('.item');
var select = document.querySelector('span');
// 全选
function selectAll() {
for (var i = 0; i < input.length; i++) {
input[i].checked = true;
}
}
// 全不选
function notSelectAll() {
for (var i = 0; i < input.length; i++) {
input[i].checked = false;
}
}
// 反选
function invertCheck() {
for (var i = 0; i < input.length; i++) {
if (input[i].checked == false) {
input[i].checked = true;
} else {
input[i].checked = false;
}
}
}
// 点击全选后，文字变成全不选，同时全部复选框选中，以此反复
all.addEventListener('click', function () {
all.checked == false ? select.innerHTML = "全选" : select.innerHTML = "全不选";
if (all.checked == true) {
selectAll()
} else {
notSelectAll()
}
})
// 反选，即点击后原本没有选中选中，选中的取消选中
invertBtn.addEventListener('click', function () {
invertCheck()
})
</script>
</body>
</html>
