1.true和false有时候当做0 和 1来使用；
2.如果需要看一个长度的时候，先定义，然后在函数里面自增
3.使用element.checked = true/false可以定义有没有被点击
4.定义好的函数，要被调用才能执行，可以用一个for循环来每一次点击的时候调用
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>复选框（checkbox）全选/全不选/返选</title>
<style>
body,
dl,
dt,
dd,
p {
margin: 0;
padding: 0;
}
body {
font-family: Tahoma;
font-size: 12px;
}
label,
input,
a {
vertical-align: middle;
}
label {
padding: 0 10px 0 5px;
}
a {
color: #09f;
text-decoration: none;
}
a:hover {
color: red;
}
dl {
width: 120px;
margin: 10px auto;
padding: 10px 5px;
border: 1px solid #666;
border-radius: 5px;
background: #fafafa;
}
dt {
padding-bottom: 10px;
border-bottom: 1px solid #666;
}
dt label {
font-weight: 700;
}
p {
margin-top: 10px;
}
</style>
</head>
<body>
<dl>
<dt>
<input type="checkbox" id="checkAll" />
<label id="lableAll">全选</label>
<a href="javascript:;">反选</a>
</dt>
<dd>
<p>
<input type="checkbox" name="item" />
<label>选项（一）</label>
</p>
<p>
<input type="checkbox" name="item" />
<label>选项（二）</label>
</p>
<p>
<input type="checkbox" name="item" />
<label>选项（三）</label>
</p>
<p>
<input type="checkbox" name="item" />
<label>选项（四）</label>
</p>
<p>
<input type="checkbox" name="item" />
<label>选项（五）</label>
</p>
<p>
<input type="checkbox" name="item" />
<label>选项（六）</label>
</p>
<p>
<input type="checkbox" name="item" />
<label>选项（七）</label>
</p>
<p>
<input type="checkbox" name="item" />
<label>选项（八）</label>
</p>
<p>
<input type="checkbox" name="item" />
<label>选项（九）</label>
</p>
<p>
<input type="checkbox" name="item" />
<label>选项（十）</label>
</p>
</dd>
</dl>
<center>
1、切换全选/全不选文字；
<br />
<br />
2、根据选中个数更新全选框状态；
</center>
</body>
<script>
var itemParent = document.querySelector("dd");
// 全选的时候，.checked 的值为true
// 怎么找到全选的lable和各个选项的lable:加好表示旁边
var lableAll = document.getElementById("lableAll");
// 下面的几个选项卡文字前面的框
var itemarr = document.querySelectorAll("p>input");
// 当选中按钮被点击的时候，这个lableAll里面的文字就要改变
var checkAll = document.getElementById("checkAll");
// 反选按钮
var reverseButton = document.querySelector("dt a ");
checkAll.onclick = function () {
if (checkAll.checked) {
lableAll.innerHTML = "全不选";
} else {
lableAll.innerHTML = "全选";
}
// 全选被点击的时候，除了上面发生的，下面的几个选项卡前面的框也要被选中
for (var i = 0; i < itemarr.length; i++) {
itemarr[i].checked = this.checked;
}
};
// 怎么看有没有全选：定义数量，如果被点击的itemArry的数量等于定义的数量
// 那么，checkAll.checked = true
// 需要注意的事，true 和false可以当成1和0使用
// 每次点击，定义的点击次数就加一
function isCheckAll() {
var checkedNum = 0;
for (var i = 0; i < itemarr.length; i++) {
if (itemarr[i].checked) {
checkedNum++;
}
}
if (checkedNum === itemarr.length) {
checkAll.checked = true;
lableAll.innerHTML = "全不选";
} else {
checkAll.checked = false;
lableAll.innerHTML = "全选";
}
}
// 函数定义好了
// 每一次这些选项卡被点击的时候，函数就执行
for (var i = 0; i < itemarr.length; i++) {
itemarr[i].onclick = isCheckAll;
}
// 操作反选按钮
reverseButton.onclick = function () {
for (var i = 0; i < itemarr.length; i++) {
if (itemarr[i].checked) {
itemarr[i].checked = false;
} else {
itemarr[i].checked = true;
}
}
isCheckAll();
};
</script>
</html>
