标签：checked items 练习 JS 全选 选中 allCheckBox 选框
以下时多选框的全选、全不选、反选和提交的练习，注意看注释，将思路理清楚
<!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
2.id为noCheckBtn
3.id为fanBtn
4.id为tjBtn
5.id为allCheckBox
6.items
*/
//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>
标签：checked,items,练习,JS,全选,选中,allCheckBox,选框 来源： https://blog.csdn.net/Fantasc/article/details/119374960
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。