使用纯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>
实现这个功能还有太多的方法了。这个只是其中的一个。
