- 案例演示
- 源代码
<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> * { padding: 0; margin: 0; } .wrap { 300px; margin: 100px auto 0; } table { border-collapse: collapse; border-spacing: 0; border: 1px solid #c0c0c0; 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; }; }