- 案例演示
- 源代碼
<!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> var cksAll=document.getElementById('j_cbAll'); var cks = document.getElementById('j_tb').getElementsByTagName("input"); cksAll.onclick=function() { for (var i = 0; i < cks.length; i++) { cks[i].checked=this.checked; } }; 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; } } cksAll.checked=flag; }; } </script> </body> </html>
- 具體實現
-
思想方法：
//全選：點擊全選按鈕，其他的小按鈕都選中，說明小按鈕的狀態是跟着全選按鈕而變化的
//不全選：小按鈕有一個沒選擇，全選不選中
- 核心代碼
//獲取全選按鈕
var cksAll=my$("j_cbAll");
//獲取其他小按鈕 var cks = my$("j_tb").getElementsByTagName("input");
//實現點擊全選按鈕，小按鈕的狀態跟着全選按鈕變化 cksAll.onclick=function() { for (var i = 0; i < cks.length; i++) { cks[i].checked=this.checked; } };
//遍歷每一個小按鈕 for(var i=0;i<cks.length;i++){
//為每一個按鈕注冊點擊事件 cks[i].onclick=function(){
//開始默認全都選中 var flag=true; for(var j=0;j<cks.length;j++){
//循環過程中如果有一個小按鈕沒被選中，就將flag=false,並且此時不需要繼續遍歷了 if(!cks[j].checked){ flag=false; break; } }
//全選按鈕狀態和flag相同 cksAll.checked=flag; }; }