<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <meta name="referrer" content="unsafe-url"/> <meta name="referrer" content="always"/> <style> *{margin:0;padding:0;} table{width:500px;margin:20px auto;border-collapse:collapse;} td{border:1px solid #ccc;padding:10px;} </style> </head> <body> <table> <thead> <tr> <td>一级菜单</td> <td>二级菜单</td> <td>按钮</td> </tr> </thead> <tbody> <tr> <td class="check_all"><input type="checkbox"/>源代码备案</td> <td class="check_all"> <input type="checkbox"/>订单管理 </td> <td class="box_sel"> <div class="check_box"><input type="checkbox"/>修改</div> <div class="check_box"><input type="checkbox"/>关闭订单</div> <div class="check_box"><input type="checkbox"/>订单详情操作</div> </td> </tr> <tr class="check_more"> <td class="check_all check_total" rowspan="2"><input type="checkbox"/>用户管理</td> <td class="check_all check_one"><input type="checkbox"/>用户列表</td> <td class="box_sel"> <div class="check_box"><input type="checkbox"/>修改</div> <div class="check_box"><input type="checkbox"/>删除</div> <div class="check_box"><input type="checkbox"/>禁止访问</div> <div class="check_box"><input type="checkbox"/>发送消息</div> <div class="check_box"><input type="checkbox"/>添加用户</div> <div class="check_box"><input type="checkbox"/>订单查看日志</div> </td> </tr> <tr class="check_more"> <td class="check_all check_one"><input type="checkbox"/>禁止用户列表</td> <td class="box_sel"> <div class="check_box"><input type="checkbox"/>还原</div> </td> </tr> <tr class="check_more"> <td class="check_all check_total" rowspan="2"><input type="checkbox"/>基础管理</td> <td class="check_all check_one"><input type="checkbox"/>管理员管理</td> <td class="box_sel"> <div class="check_box"><input type="checkbox"/>新增</div> <div class="check_box"><input type="checkbox"/>编辑</div> <div class="check_box"><input type="checkbox"/>删除</div> <div class="check_box"><input type="checkbox"/>分配权限</div> </td> </tr> <tr class="check_more"> <td class="check_all check_one"><input type="checkbox"/>修改密码</td> <td></td> </tr> <tr> <td class="check_all"><input type="checkbox"/>财务管理</td> <td class="check_all"><input type="checkbox"/>财务列表</td> <td class="box_sel"> <div class="check_box"><input type="checkbox"/>添加流水</div> <div class="check_box"><input type="checkbox"/>导出excel</div> </td> </tr> <tr> <td class="check_all"><input type="checkbox"/>消息管理</td> <td class="check_all"><input type="checkbox"/>消息列表</td> <td class="box_sel"> <div class="check_box"><input type="checkbox"/>添加消息</div> <div class="check_box"><input type="checkbox"/>消息撤回</div> </td> </tr> </tbody> </table> </body> <script src="jquery-1.11.3.min.js"></script> <script> $(".check_all input[type=checkbox]").on("click",function(){ $(this).parents(".check_all").nextAll().find("input[type=checkbox]").prop("checked",$(this).prop("checked")); if($(this).parents(".check_all").hasClass("check_total")){ $(this).parents(".check_more").next(".check_more").find("input[type=checkbox]").prop("checked",$(this).prop("checked")); }else{ $(this).parents(".check_all").prevAll(".check_all").find("input").prop("checked",$(this).prop("checked")); } }); $(".box_sel input[type=checkbox]").on("click",function(){ var $check=$(this).parents(".box_sel").find("input"); var $check1=$(this).parents(".box_sel").siblings(".box_sel").find("input"); var b=true; var c=true; for(var i=0;i<$check.length;i++){ if($check[i].checked==false){ b=false; break; } } for(var j=0;j<$check1.length;i++){ if($check1[i].checked==false){ c=false; break; } } $(this).parents(".box_sel").prev(".check_all").find("input").prop("checked",b); if(b === c){ $(this).parents(".box_sel").prevAll(".check_all").find("input").prop("checked",b); }else if($check1.length == 0){ $(this).parents(".box_sel").prevAll(".check_all").find("input").prop("checked",b); } }); $(".check_one input[type=checkbox]").on("click",function(){ var $prevOne=$(this).parents(".check_one").prev(".check_all"); var $nextOne=$(this).parents(".check_more").next(".check_more").find(".check_one"); if($prevOne.hasClass("check_total")){ if($(this).prop("checked") == true && $nextOne.find("input").prop("checked") == true){ $(this).parents(".check_one").prev(".check_total").find("input").prop("checked",true); }else{ $(this).parents(".check_one").prev(".check_total").find("input").prop("checked",false); } }else{ if($(this).prop("checked") == true && $(this).parents(".check_more").prev(".check_more").find(".check_one input").prop("checked") == true){ $(this).parents(".check_more").prev(".check_more").find(".check_total input").prop("checked",true); }else{ $(this).parents(".check_more").prev(".check_more").find(".check_total input").prop("checked",false); } } }); $(".check_more .box_sel input[type=checkbox]").on("click",function(){ if($(this).parents(".check_more").find(".check_total").length <= 0){ var $check2=$(this).parents(".box_sel").find("input"); var aa=true; for(var i=0;i<$check2.length;i++){ if($check2[i].checked == false){ aa=false; break; } } if(aa == false || $(this).parents(".check_more").prev(".check_more").find(".check_one input").prop("checked") == false){ $(this).parents(".check_more").prev(".check_more").find(".check_total input").prop("checked",false); }else{ $(this).parents(".check_more").prev(".check_more").find(".check_total input").prop("checked",true); } }else{ var $check3=$(this).parents(".box_sel").find("input"); var bb=true; for(var i=0;i<$check3.length;i++){ if($check3[i].checked == false){ bb=false; break; } } if(bb == false || $(this).parents(".check_more").next(".check_more").find(".check_one input").prop("checked") == false){ $(this).parents(".box_sel").siblings(".check_total").find("input").prop("checked",false); }else{ $(this).parents(".box_sel").siblings(".check_total").find("input").prop("checked",true); } } }) </script> </html>