纯js全选多选
Posted JAHC
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了纯js全选多选相关的知识，希望对你有一定的参考价值。
使用纯js来写一个模拟购物车的全选和多选功能。
思路：
1、需要给每一个input设置点击事件
2、全选就是把所有的checkbox设置为true
3、取消一个不全选，就是判断是否全部的checkbox都被选了
代码：
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> </head> <body> <input type="checkbox" id="all"/>全选 <div id="checkbox"> <input type="checkbox"/>选择一 <br/> <input type="checkbox"/>选择二 </div> <script> //获取全选按钮 var all = document.getElementById("all"); //获取div中所有的复选框 var checkboxs = document.getElementById("checkbox").getElementsByTagName("input"); //点击全选,获取他当前的状态并设置新的状态 all.onclick = function(){ for(var i = 0;i < checkboxs.length; i++){ checkboxs[i].checked = this.checked; } } //获取checkbox所有复选框并注册点击事件 for(var i = 0;i < checkboxs.length; i++){ checkboxs[i].onclick = function(){ //设置默认全部选中 var flag = true; //判断是否所有的复选框都选中 for(var j = 0;j < checkboxs.length; j++){ if(!checkboxs[j].checked){//如果有一个不被选中 flag = false; //则取消全选 break; } } all.checked = flag; //取消全选 } } </script> </body> </html>
实现这个功能还有太多的方法了。这个只是其中的一个。
以上是关于纯js全选多选的主要内容，如果未能解决你的问题，请参考以下文章