做后台管理程序時,用到一個checkbox組的全選和取消全選的功能,
主要是邏輯上的坑,理清后大概是:
1.全選點擊后,小弟1~4都要選上,點擊取消,小弟們也要取消
2.只要有一個小弟取消時,全選要取消
3.當小弟都選上時,全選要選上
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>全選和取消全選</title> </head> <body> <h2>管理員列表</h2> <table border="1px" width="500px"> <thead> <tr> <th><input type="checkbox"/>全選</th> <th>管理員ID</th> <th>姓名</th> <th>操作</th> </tr> </thead> <tbody> <tr> <td><input type="checkbox"/>小弟1</td> <td>1</td> <td>Tester</td> <td>修改 刪除</td> </tr> <tr> <td><input type="checkbox"/>小弟2</td> <td>2</td> <td>Manager</td> <td>修改 刪除</td> </tr> <tr> <td><input type="checkbox"/>小弟3</td> <td>3</td> <td>Analyst</td> <td>修改 刪除</td> </tr> <tr> <td><input type="checkbox"/>小弟4</td> <td>4</td> <td>Admin</td> <td>修改 刪除</td> </tr> </tbody> </table> <button>刪除選定</button> <script> //查找thead下第一個th下的input var chbAll=document.querySelector( "thead th:first-child>input" ); //查找tbody中所有第一個td下的input var chbs=document.querySelectorAll( "tbody td:first-child>input" ); //為chbAll綁定單擊事件 chbAll.onclick=function(){ //遍歷chbs中每個chb for(var i=0;i<chbs.length;i++){ //設置當前chb的checked等於this的checked chbs[i].checked=this.checked; } } //為chbs中每chb都綁定單擊事件 for(var i=0;i<chbs.length;i++){ chbs[i].onclick=function(){ if(!this.checked) chbAll.checked=false; else{ //選擇tbody下第一個td中的未選中的input var unchecked= document.querySelector( "tbody td:first-child>input:not(:checked)" ); if(unchecked===null) chbAll.checked=true; } } } </script> </body> </html>