案例：全選和全不選
阿新 • • 發佈：2018-12-20
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } .wrap { width: 300px; margin: 100px auto 0; } table { border-collapse: collapse; border-spacing: 0; border: 1px solid #c0c0c0; width: 300px; } th, td { border: 1px solid #d0d0d0; color: #404060; padding: 10px; } th { background-color: #09c; font: bold 16px "微軟雅黑"; color: #fff; } td { font: 14px "微軟雅黑"; } tbody tr { background-color: #f0f0f0; } tbody tr:hover { cursor: pointer; background-color: #fafafa; } </style> </head> <body> <div class="wrap"> <table> <thead> <tr> <th> <input type="checkbox" id="j_cbAll"/> </th> <th>菜名</th> <th>飯店</th> </tr> </thead> <tbody id="j_tb"> <tr> <td> <input type="checkbox"/> </td> <td>紅燒肉</td> <td>田老師</td> </tr> <tr> <td> <input type="checkbox"/> </td> <td>西紅柿雞蛋</td> <td>田老師</td> </tr> <tr> <td> <input type="checkbox"/> </td> <td>油炸榴蓮</td> <td>田老師</td> </tr> <tr> <td> <input type="checkbox"/> </td> <td>清蒸助教</td> <td>田老師</td> </tr> </tbody> </table> </div> <script src="common.js"></script> <script> var ckAll=document.getElementById("j_cbAll"); var cklist=document.getElementById("j_tb").getElementsByTagName("input"); ckAll.onclick=function () { for(var i=0;i<cklist.length;i++){ cklist[i].checked=ckAll.checked; } }; for(var j=0;j<cklist.length;j++){ cklist[j].onclick=function () { for(var k=0;k<cklist.length;k++){ var flag=0; if(!cklist[k].checked){ flag=1; break; } } if(flag==1){ ckAll.checked=false; } else{ ckAll.checked=true; } }; } // //獲取全選的這個複選框 // var ckAll = my$("j_cbAll"); // //獲取tbody中所有的小複選框 // var cks = my$("j_tb").getElementsByTagName("input"); // //點選全選的這個複選框,獲取他當前的狀態,然後設定tbody中所有複選框的狀態 // ckAll.onclick = function () { // //console.log(this.checked); // for (var i = 0; i < cks.length; i++) { // cks[i].checked = this.checked; // } // }; // // //獲取tbody中所有的複選框,分別註冊點選事件 // for(var i=0;i<cks.length;i++){ // cks[i].onclick=function () { // var flag=true;//預設都被選中了 // //判斷是否所有的複選框都選中 // for(var j=0;j<cks.length;j++){ // if(!cks[j].checked){ // //沒選中就進來了 // flag=false; // break; // } // } // //全選的這個複選框的狀態就是flag這個變數的值 // ckAll.checked=flag; // }; // } </script> </body> </html>