全选功能实现
<!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>