全选练习
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script type="text/javascript">
window.onload =function(){
// 全局获取四个多选框
var items = document.getElementsByName("items");
// 全选功能，点击按钮之后多选框全被选中
// 获取按钮
var checkedAllBtn = document.getElementById("checkedAllBtn");
// 绑定单击响应函数
checkedAllBtn.onclick = function(){
// 设置四个多选框变成选中状态，先要获取四个多选框，已经全局获取过多选框所以直接遍历
for(var i=0;i<items.length;i++){
//通过多选框的checked属性可以来获取或设置多选框的选中状态
// 遍历后的四个多选框会在单击后触发选中
items[i].checked = true;
}
// 同步全选全不选按钮
// 全选让全选按钮变成选中状态
checkedAllBox.checked = true;
};
// 全不选功能，点击按钮之后多选框全不被选中
// 获取按钮
var checkedNoBtn = document.getElementById("checkedNoBtn");
// 绑定单击响应函数
checkedNoBtn.onclick = function(){
// 设置四个多选框变成不选中状态，先要获取四个多选框，已经全局获取过多选框所以直接遍历
for(var i=0;i<items.length;i++){
//通过多选框的checked属性可以来获取或设置多选框的选中状态
// true代表选中 false代表不选
// 遍历后的四个多选框会在单击后触发不选中
items[i].checked = false;
}
// 同步全选按钮
// 全不选让全选按钮变成不选中状态
checkedAllBox.checked = false;
};
// 反选按钮，选中变成没选中，没选中就选中
// 获取按钮
var checkedRevBtn = document.getElementById("checkedRevBtn");
// 绑定单击响应函数
checkedRevBtn.onclick = function(){
// 在反选时也要判断四个多选框是否全部选中，与全选按钮同步
//先将checkedAllBox状态默认true
checkedAllBox.checked = true;
// 遍历获取四个多选框
for(var i=0; i<items.length ; i++){
// 设置反选
// 第一步先判断多选框状态
// if(items[i].checked == false){
// // 如果多选框为没选中状态则设置成选中状态
// items[i].checked = true;
// }else{
// // 否则就是选中状态，把它变成没选中状态
// items[i].checked = false;
// }
items[i].checked =! items[i].checked;//if方法太蠢，直接取反便可，true被赋值为false false被赋值false便为true
// 判断四个多选框是否全选（判断状态）
// 如果有一个没有选中那么进入判断，将全选按钮checkedAllBox设置为未选中状态，如果取反后都为选中则不进入判断，就是全选状态
if(!items[i].checked){
checkedAllBox.checked = false;
// 不能再break否则终止循环上面就不执行不取反了
}
}
};
// 提交功能 弹出选中的value的值
// 获取按钮
var sendBtn = document.getElementById("sendBtn");
// 绑定单击响应函数
sendBtn.onclick = function(){
//遍历获取四个多选框
for(var i=0; i<items.length ; i++){
//判断选中状态，选中了为true就打印，没选中为false就无操作
if(items[i].checked){
alert(items[i].value);
}
}
};
// 全选/全不选按钮
// 获取按钮
var checkedAllBox = document.getElementById("checkedAllBox");
// 绑定单击响应
checkedAllBox.onclick = function(){
//遍历获取四个多选框
for(var i=0; i<items.length ; i++){
//让四个多选框点击状态同步与全选全不选按钮 点击状态
// 在事件的响应函数中，响应函数是给谁绑定的this就是谁
items[i].checked = this.checked;
}
};
/*
如果四个多选框全都选中，则checkedAllBox也应该选中
如果四个多选框没都选中，则checkedAllBox也不应该选中
让全选按钮checkedAllBox的点击状态同步四个复选框的点击状态
*/
// 上面已经全局获取过四个复选框所以直接遍历
for(var i=0 ; i<items.length ; i++){
// 将四个复选框绑定上单击响应函数
items[i].onclick = function(){
// 一上来默认四个多选框全都选中，checkedAllBox状态默认true
checkedAllBox.checked = true;
// 然后进入for循环，遍历断四个多选框的选中状态，都选中则不进入判断，就是全选，一旦有一个没选中进入判断
for(var j = 0;j<items.length;j++){
// 如果有一个没有选中那么进入判断，将全选按钮checkedAllBox设置为未选中状态
if(!items[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>
浙公网安备 33010602011771号