本文介绍了JavaScript中实现多选框全选、全不选、反选和提交功能的练习，详细分析了各个功能的实现逻辑。全选通过设置所有items元素的checked属性为true，全不选则设置为false，反选则是取反当前状态。提交按钮用于输出checked为true的元素。同时讨论了全选/全不选按钮的状态跟随功能，即当所有多选框选中时，按钮被选中，否则不选中，并且按钮状态会根据全选和全不选操作实时更新。
以下时多选框的全选、全不选、反选和提交的练习，注意看注释，将思路理清楚
-
全选按钮功能分析：
获取元素并为其绑定单击响应函数，在单击事件中获取name为items的元素，对其进行遍历，将遍历得到的所有元素的checked属性设置为true，即将其设置为被选中状态。
-
全不选按钮功能分析：
原理同全选按钮，不同的是最后将遍历得到的元素的checked属性设置为false即可。
-
反选按钮功能分析：
获取反选按钮元素，为其绑定单击响应函数，在事件中遍历得到name为items的元素，对遍历得到元素的checked属性进行判断，如果是true就将其设置为false，如果是false则将其设置为true。（更简便的方法就是：将其checked属性设置取反就行）
-
提交按钮功能分析：
获取提交按钮，为其绑定单击响应函数，在单击事件中获取name为items的元素，对其进行遍历，将其checked属性为true的元素输出即可。
-
全选/全不选按钮功能分析：
获取全选/全不选按钮，为其绑定单击响应函数，在响应函数中获取name为items的元素，对其进行遍历，将遍历得到的name为items的元素的checked属性，设置成与全选/全不选按钮的checked属性相同的值即可。
-
处理全选/全不选按钮的功能，使其在多选框全部被选中的情况下，自身被勾上，多选框有一个或多个没有被选中的情况下，全选/全不选按钮自身不被勾上。
-
全选/全不选按钮随着全选按钮或者全不选按钮功能变化而变化（如果全选按钮触发，它自身也被选中，如果全不选按钮被触发，它自身也不被选中）。
-
全选/全不选按钮随反选按钮的功能的变化而变化（重点理清思路）。
-
<!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>
<link rel="stylesheet" type="text/css" href="css/checkbox.css">
<script type="text/javascript">
// function myClick(btn,fun){
// var btn = document.getElementById("btn");
// btn.onclick = fun;
// }
window.onload = function(){
//1.全选按钮的功能：点击按钮之后，所有的都被选中
//为id为allCheckBtn绑定单击事件
var allCheckBtn = document.getElementById("allCheckBtn");
var allCheckBox = document.getElementById("allCheckBox");
allCheckBtn.onclick = function(){
//设置，让四个多相框变成选中状态
//获取多选框
var items = document.getElementsByName("items");
//遍历items
for(i = 0; i < items.length; i++){
//使四个多选框都变成选中状态
//通过checked属性，可以获取或者设置多选框的选中状态
items[i].checked = true;
}
//将全选/全不选按钮设置为true
allCheckBox.checked = true;
};
//2.全不选按钮的功能：点击按钮，使所有的多选框都不被选中
var noCheckBtn = document.getElementById("noCheckBtn");
noCheckBtn.onclick = function(){
//设置，让四个多相框变成未选中状态
//获取多选框
var items = document.getElementsByName("items");
//遍历items
for(var i = 0; i < items.length; i++){
//使四个多选框都变成选中状态
//通过checked属性，可以获取或者设置多选框的选中状态
items[i].checked = false;
}
//将全选/全不选按钮设置为false
allCheckBox.checked = false;
};
//3.反选按钮的功能,点击反选按钮，让被选中的选项不被选中，没有被选中的选项变成被选中的状态
var fanCheckBtn = document.getElementById("fanCheckBtn");
fanCheckBtn.onclick = function(){
//设置全选框的状态默认为true，如果一直没有进入下面的判断，则证明四个选项都被选中了
allCheckBox.checked = true;
var items = document.getElementsByName("items");
for(i = 0; i < items.length; i++){
// //判断多选框的状态,如果多选框已被选中，就将其设置为未选中状态，反之设置为选中状态
// if(items[i].checked ==true){ //items.checked本身就是布尔值，注意判断的时候等于是两个等号
// items[i].checked = false;
// }else{
// items[i].checked = true;
// }
items[i].checked = !items[i].checked;//对其进行取反，比if...else更加方便
//只要有一个没有背选中，就代表四个多选框没有背全选
//只要进入下面的判断，就证明不是全选,将allCheckBox设置为flase状态
if(!items[i].checked){
allCheckBox.checked = false;
}
}
//在反选操作时，也要对全选/全不选的选项框进行判断
/*
要将如下被代码整合到反选按钮的功能中，以上时已经整理好的代码，注意理解，理清楚思路
*/
// //设置全选框的状态默认为true，如果一直没有进入下面的判断，则证明四个选项都被选中了
// allCheckBox.checked = true;
// for(j=0;j<items.length;j++){
// //判断四个多选框是否被全部选中
// //只要有一个没有背选中，就代表四个多选框没有背全选
// //只要进入下面的判断，就证明不是全选,将allCheckBox设置为flase状态
// if(!items[j].checked){
// allCheckBox.checked = false;
// //只要进入判断，就能直接得到结果为false,不用在对后面的数据进行重复判断了，可以跳出循环,提高代码执效率
// break;
// }
// }
};
//4.提交按钮的功能，点击按钮，将被选中的选项显示
var tjBtn = document.getElementById("tjBtn");
tjBtn.onclick = function(){
var items = document.getElementsByName("items");
for(var i = 0; i < items.length; i++){
//对多选框的状态进行判断
if(items[i].checked == true){
alert(items[i].value);
}
}
};
//5.全选/全不选多选框的功能：当多选框选中时，所有的都被选中，多选框没有被选中，则所有的都不被选中
allCheckBox.onclick = function(){ //绑定单击响应函数
var items = document.getElementsByName("items");
for(var i=0; i<items.length; i++){
// items[i].checked = allCheckBox.checked;//这种方法不如下面的好使
items[i].checked = this.checked;//在事件的响应函数中，响应函数是为谁绑定的，this就是谁
}
};
//6.处理选项没有全选，但是allCheckBox仍然选中，或者选项全部选中，但allCheckBox没有选中的问题
//为四个多选框，分贝绑定单击响应函数
var items = document.getElementsByName("items");
for(i=0; i<items.length;i++){
//嵌套for循环，每点击一次按钮，就要进行四次判断
items[i].onclick = function(){
//设置全选框的状态默认为true，如果一直没有进入下面的判断，则证明四个选项都被选中了
allCheckBox.checked = true;
for(j=0;j<items.length;j++){
//判断四个多选框是否被全部选中
//只要有一个没有背选中，就代表四个多选框没有背全选
//只要进入下面的判断，就证明不是全选,将allCheckBox设置为flase状态
if(!items[j].checked){
allCheckBox.checked = false;
//只要进入判断，就能直接得到结果为false,不用在对后面的数据进行重复判断了，可以跳出循环,提高代码执效率
break;
}
}
};
}
};
</script>
</head>
<body>
<form method="POST" action="">
<p>你喜欢什么样的运动？<input type="Checkbox" class="bt" id="allCheckBox" />全选/全不选</p>
<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="allCheckBtn" value="全 选"/>
<input type="button" id="noCheckBtn" value="全不选"/>
<input type="button" id="fanCheckBtn" value="反 选"/>
<input type="button" id="tjBtn" value="提 交"/>
</form>
</body>
</html>
扫一扫
2449
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
