js实现多选，全选，反选的功能
程序员文章站
2022-05-31 10:54:50
...
需求：在前端页面实现一个多选的模块，我们可以全选/不选，多选，反选。
思路：需要按钮或者是多选框,最主要的是什么，能获取到四个等待选择的对象【足球、篮球这些】，还有一个，被选中的状态是什么？没有被选中的状态又是什么？通过查阅手册，第三项，checked表示选中状态[true|false].
等待改进的地方：得把js和html分离开来，从外部引入js，还有，我们每次给对应的按钮或者多选框添加一个onclick函数时，代码十分相似，这个可以把公共部分提取出来，减少冗余
代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
#outer{
margin:0;
padding:0;
}
</style>
<title></title>
</head>
<body>
<form action="post">
你爱好的运动是？<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="checkAllBtn" value="全选" />
<input type="button" id="checkNoBtn" value="全不选" />
<input type="button" id="checkRevBtn" value="反选" />
<input type="button" id="sendBtn" value="提交" />
</form>
<script>
//全选
var cheakallbtn = document.getElementById("checkAllBtn");
cheakallbtn.onclick=function(){
//获取四个多选框
var items=document.getElementsByName("items");
for(var i=0;i<items.length;++i)
{
items[i].checked=true;//设置为选中状态
}
};
//全不选
var cheaknobtn = document.getElementById("checkNoBtn");
cheaknobtn.onclick=function(){
//获取四个多选框
var items=document.getElementsByName("items");
for(var i=0;i<items.length;++i)
{
items[i].checked=false;//设置为选中状态
}
};
//反选
var checkrevbtn = document.getElementById("checkRevBtn");
checkrevbtn.onclick=function(){
//获取四个多选框
var items=document.getElementsByName("items");
for(var i=0;i<items.length;++i)
{
items[i].checked= !items[i].checked;
}
};
//提交
var sendbtn = document.getElementById("sendBtn");
sendbtn.onclick=function(){
//获取四个多选框
var items=document.getElementsByName("items");
for(var i=0;i<items.length;++i)
{
if(items[i].checked)
alert(items[i].value);
}
};
//对多选框进行操作
var checkedAllBox = document.getElementById("checkedAllBox");
checkedAllBox.onclick=function(){
var items=document.getElementsByName("items");
for(var i=0; i<items.length;++i){
items[i].checked=checkedAllBox.checked;
}
};
</script>
</body>
</html>
结果：
效果都是可以实现的，前面的全选只要勾上，下面就会全选，不勾的话，下面就会全不选[可能看起来跟下面的按钮功能有点重叠，但是，这个可以更加方便用户做选择]
据不完全统计：上面的代码。有四五个bug，自己可以一试
bug真的多：上面的复选框勾上了(即全选，下面是会全选的，但是下面全选了，上面的复选框不会自动勾上，下面全选按钮，全不选按钮和反选一些情形是要跟上面的复选框同步的，比如，全部都选上了，然后，反选，这个时候，上面的复选框应该也要不选上，但是反转这里欠缺了好多)
修正了一些bug：例如，下面的按钮与上面的复选框情形不匹配的情况
修正后的代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style type="text/css">
#outer{
margin:0;
padding:0;
}
</style>
<title></title>
</head>
<body>
<form action="post">
你爱好的运动是？<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="checkAllBtn" value="全选" />
<input type="button" id="checkNoBtn" value="全不选" />
<input type="button" id="checkRevBtn" value="反选" />
<input type="button" id="sendBtn" value="提交" />
</form>
<script>
//获取四个多选框
var items=document.getElementsByName("items");
//对多选框进行操作
var checkedAllBox = document.getElementById("checkedAllBox");
//全选
var cheakallbtn = document.getElementById("checkAllBtn");
cheakallbtn.onclick=function(){
for(var i=0;i<items.length;++i)
{
items[i].checked=true;//设置为选中状态
}
checkedAllBox.checked=true;//多选框保持与按钮一致
};
//全不选
var cheaknobtn = document.getElementById("checkNoBtn");
cheaknobtn.onclick=function(){
for(var i=0;i<items.length;++i)
{
items[i].checked=false;//设置为选中状态
}
checkedAllBox.checked=false;//多选框保持与按钮一致
};
//反选
var checkrevbtn = document.getElementById("checkRevBtn");
checkrevbtn.onclick=function(){
for(var i=0;i<items.length;++i)
{
items[i].checked= !items[i].checked;
}
checkedAllBox.checked=true;//先默认为true，下面如果有不行的，再修改，就很妙，目的也是为了与按钮保持一致
for(var j=0;j<items.length;++j)
{
var count=0;
//只要一个没选中，就不是全选
if(!items[j].checked){
//将checkAllBox设置为false
checkedAllBox.checked=false;
break;
}
}
};
//提交
var sendbtn = document.getElementById("sendBtn");
sendbtn.onclick=function(){
for(var i=0;i<items.length;++i)
{
if(items[i].checked)
alert(items[i].value);
}
};
checkedAllBox.onclick=function(){
for(var i=0; i<items.length;++i){
items[i].checked=checkedAllBox.checked;
}
};
/*由上往下的状态会改变，但是由下往上的状态不会改变
改进：
如果四个多选框都选中，则checkedAllBox也应该选上
如果四个多选课都没选中，则checkedAllBox也不应该选中*/
//为每一个多选框绑定一个单击函数
for (var i=0;i<items.length;++i)
{
items[i].onclick=function(){
checkedAllBox.checked=true;//先默认为true，下面如果有不行的，再修改，就很妙，这一行，真的是被震惊到了，太秒了这里
for(var j=0;j<items.length;++j)
{
var count=0;
//只要一个没选中，就不是全选
if(!items[j].checked){
//将checkAllBox设置为false
checkedAllBox.checked=false;
break;
}
}
};
}
</script>
</body>
</html>
到这里，应该算是一个比较完整的代码了，如果有bug，欢迎大家提出来，大家共同学习，共同进步。。。