介绍
本文是在学习JS所做的学习笔记,所有笔记内容请看:JS学习笔记
全选/全部选 练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
window.onload=function(){
1、全选
var items=document.getElemetsByName("items");
var checkedAllBtn=document.getElementById("checkAllBtn");
checkedAllBtn.onclick=function(){
// 获取多选框
var items=document.getElemetsByName("items");
// 复选框变成选中状态
for(var i=0;i<items.length;i++){
items[i].checked=true;
}
checkAllbox.checked=true;
}
2、复选框 全选/全不选
var checkedAllbox=document.getElementById("checkAllbox");
checkedAllbox.onclick=function(){
for(let i=0;i<items.length;i++){
items[i].checked=this.checked
}
}
}
3、如果四个多选框全都选中,则checkedAllBox也应选中
如果四个多选框没都选中,则checkAllbox也不应选中
// 为四个多选框分别绑定单击
for(var i=0;i<items.length;i++){
items[i].onclick=function(){
// 判断四个多选框是否全选
// 只要一个没选中,就不是全选
// 先将全选/非全选选中,然后再在下面的for循环中
// 进行判断,取消
checkAllbox.checked=true;
for(var j=0;j<=items.length;j++){
if(!items[i].checked){
checkedAllBox.checked=false;
break;
}
}
}
}
</script>
</head>
<body>
<form method="post" action="">
<input type="checkAllbox" name="items" value="全选/全不选"/>全选/全不选
<input type="checkbox" name="items" value="足球"/>足球
<input type="checkbox" name="items" value="篮球"/>篮球
<input type="checkbox" name="items" value="羽毛球"/>羽毛球
<input type="checkbox" id="checkAllbtn" value="全选"/>全选
<input type="checkbox" name="checkNobtn" value="全不选"/>全不选
<input type="checkbox" name="checkRevbtn" value="反选"/>反选
</form>
</body>
</html>