abstract：<!DOCTYPE html><html><head><meta charset="UTF-8"><title>js全选练习</title><script type="text/javascript">window.onload = function() {var btn =
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>js全选练习</title>
<script type="text/javascript">
window.onload = function() {
var btn = document.getElementById("all");
btn.onclick = function() {
var flag = this.checked;
var items = document.getElementsByName("ckbx");
for (var i = 0; i < items.length; i++) {
items[i].checked = flag;//将所有item的状态设为全选按钮的状态
}
}
var items = document.getElementsByName("ckbx");
for (var i = 0; i < items.length; i++) {
items[i].onclick = function() {//对每个item设置点击
var number = 0;//记录选中的个数
for (var j = 0; j < items.length; j++) {
if (items[j].checked) {
number++;
}
}
document.getElementById("all").checked = (items.length == number);
}
}
}
</script>
</head>
<body>
功能描述：点击全选，全部选中，再次点击全部不选，ckbx全部选中全选也选中，有一个没选全选不选
<br />
<input type="checkbox" id="all" />全选/全不选
<br />
<input type="checkbox" name="ckbx" />读书
<input type="checkbox" name="ckbx" />看报
<input type="checkbox" name="ckbx" />游泳
<input type="checkbox" name="ckbx" />写字
<input type="checkbox" name="ckbx" />上课
</body>
</html>
Correcting teacher：韦小宝Correction time：2019-02-23 11:58:31
Teacher's summary：全选在实际的开发中不管是网站的前台还是网站的后台使用的次数都很多 所以一定要好好掌握!