获取他当前的状态并设置新的状态 all.onclick = function (){ for ( var i = 0 ;
使用纯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全选、多选
温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/31927.html
- 上一篇：保证集群中存在指定数量的Pod副本
- 下一篇： 高度).write(保存位置+图片名)})
![[转]Node.js中package.json中^和~的区别](/uploads/allimg/200519/054J34453_lit.png "[转]Node.js中package.json中^和~的区别")