本页面完成全选/全不选,反选按钮。
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script>
window.onload = function(){
var checkedAllBtn = document.getElementById("checkedAllBtn");
//获取四个多选框的items
var item = document.getElementsByName("items");
//全选按钮
checkedAllBtn.onclick = function(){
for(var i = 0;i<item.length;i++){
item[i].checked = true;
}
//将全选/全不选设置为选中
checkedAllBox.checked = true;
}
//全不选按钮
var checkedNoBtn = document.getElementById("checkedNoBtn");
checkedNoBtn.onclick = function(){
for(var i = 0;i<item.length;i++){
item[i].checked = false;
}
//将全选/全不选设置为不选中
checkedAllBox.checked = false;
}
//反选按钮
var checkedRevBtn = document.getElementById("checkedRevBtn");
checkedRevBtn.onclick = function(){
//将checkAllBox设置为选中状态
checkedAllBox.checked = true
for(var i = 0;i<item.length;i++){
// if(item[i].checked){
// item[i].checked = false;
// }else{
// item[i].checked = true;
// }
item[i].checked = !item[i].checked;
//在反选时也需要判断四个多选框是否全都选中
//判断四个多选框是否全选
//只要有一个没选中则i就不是全选
if(!item[i].checked){
checkedAllBox.checked = false;
}
}
}
//提交按钮
var sendBtn = document.getElementById("sendBtn");
sendBtn.onclick = function(){
for(var i = 0;i<item.length;i++){
if(item[i].checked){
alert(item[i].value);
}
}
}
//5. 全选/全不选框
var checkedAllBox = document.getElementById("checkedAllBox");
checkedAllBox.onclick = function(){
//设置多选框选中状态
for(var i=0;i<item.length;i++){
item[i].checked = this.checked;
}
}
//6.items
/*
如果四个多选框全都选中,则checkedAllBox也应该选中
如果四个多选框都选中,则checkedAllBox也不应该选中
*/
//为四个多选框分别绑定点击响应函数
for(var i=0;i<item.length;i++){
item[i].onclick = function(){
for(var j=0;j<item.length;j++){
checkedAllBox.checked = true
//判断四个多选框是否全选
//只要有一个没选中则就不是全选
if(!item[j].checked){
checkedAllBox.checked = false;
break; //只要有一个没选中,就取消全选,跳出循环不用再判断了。
}
}
}
}
}
</script>
</head>
<body>
<form method="post" action="">
你爱好的运动是?<input type="checkbox" id="checkedAllBox">全选/全不选
<br>
<input type="checkbox" name="items" value="足球">足球
<input type="checkbox" name="items" value="篮球">篮球
<input type="checkbox" name="items" value="羽毛球">羽毛球
<input type="checkbox" name="items" value="兵乓球">兵乓球
<br>
<input type="button" id="checkedAllBtn" value="全选">
<input type="button" id="checkedNoBtn" value="全不选">
<input type="button" id="checkedRevBtn" value="反选">
<input type="button" id="sendBtn" value="提交">
</form>
</body>
</html>
总结:
onload() 先加载界面。
全选按钮:循环全部复选框,checked赋值为true。最后将全选/全不选框赋值为true。
全不选按钮:循环全部复选框,checked赋值为false。最后将全选/全不选赋框值为false。
反选按钮: item[i].checked = !item[i].checked; 循环直接赋值为反布尔属性。
5全选/全不选框: this指向全选/全不选框,把全选/全不选框checked全部赋值给其他复选框。
6items:分别绑定点击函数。默认将全选全不选框设置为选中,然后进行判断,如果有选框未选中,就赋值未false。