使用純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>
實現這個功能還有太多的方法了。這個只是其中的一個。