<!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>

jq三级全选全不选的更多相关文章

  1. JQ实现复选框的全选反选不选

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  2. Jq 遍历 全选 全不选 反选

    //全选 全不选 $('#checkAll').click(function () { //判断是否被选中 var bischecked = $('#checkAll').is(':checked') ...

  3. 基于JQ的多选/全选/反选及获取选中的值

    <!-- author:青芒 --> <!DOCTYPE html> <html lang="en"> <head> <met ...

  4. 利用jQuery实现CheckBox全选/全不选/反选

    转自:http://www.cnblogs.com/linjiqin/p/3148259.html jQuery有些版本中实现CheckBox全选/全不选/反选会有bug,经测试jquery-1.3. ...

  5. 在jquery中,全选/全不选的表示方法

    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...

  6. JS checkbox 全选 全不选

    /* JS checkbox 全选 全不选 Html中checkbox: <input type="checkbox" name="cbx" value= ...

  7. checkbox实现全选全不选

    1.jQuery实现checkbox全选全不选 <!DOCTYPE html> <head runat="server"> <title>jQu ...

  8. Dynamic CRM 2013学习笔记(二十六)报表设计:Reporting Service报表 动态参数、参数多选全选、动态列、动态显示行字体颜色

    上次介绍过CRM里开始报表的一些注意事项:Dynamic CRM 2013学习笔记(十五)报表入门.开发工具及注意事项,本文继续介绍报表里的一些动态效果:动态显示参数,参数是从数据库里查询出来的:参数 ...

  9. jQuery/javascript实现全选全不选

    <html> <head> <meta charset="utf-8"> <title>Checkbox的练习</title& ...

  10. jQuery实现Checkbox中项目开发全选全不选的使用

    <html> <head> <meta charset="utf-8"> <title>Checkbox的练习</title& ...

随机推荐

  1. Cheatsheet: 2013 09.22 ~ 09.30

    Other Python basics summary Another article about big O notation Mobile Getting Started with PhoneGa ...

  2. mysql密码忘记或者不知道,怎么办?

    运行cmd: 输入mysql回车,如果成功,将出现MySQL提示符 > 连接权限数据库>use mysql; (>是本来就有的提示符,别忘了最后的分号) 修改改密码:> upd ...

  3. NoSQL聚合数据模型

    NoSQL聚合数据模型 特点 聚合数据模型的特点就是把经常访问的数据放在一起(聚合在一块): 这样带来的好处很明显,对于某个查询请求,能够在与数据库一次交互中将所有数据都取出来: 当然,以这种方式存储 ...

  4. python_way day12 RabbitMQ ,pymysql

    python_way day12 1.RabbitMQ 2.pymysql RabbitMQ 1.基本用法 """ producer """ ...

  5. Codeforces Beta Round #91 (Div. 1 Only) E. Lucky Array 分块

    E. Lucky Array time limit per test 4 seconds memory limit per test 256 megabytes input standard inpu ...

  6. RTMP命令亲自测试记录

    手动和自动录像模块: recorder rec1 { record all manual; record_unique on; record_notify on; record_max_size 51 ...

  7. Mono for Android布局控件属性小结

    1. layout_weight 用于给一个线性布局中的诸多视图的重要度赋值. 所有的视图都有一个layout_weight值,默认为零,意思是需要显示 多大的视图就占据多大的屏幕空 间.若赋一个高于 ...

  8. 集群--LVS的DR模型配置

    1.查看内核是否有IPVS内核模块 grep -i 'ip_vs' /boot/config-2.6.32-431.el6.x86_64

  9. view的封装

    如果一个view内部的子控件比较多,一般会考虑自定义一个view,把它内部子控件的创建屏蔽起来,不让外界关心 外界可以传入对应的模型数据给view,view拿到模型数据后给内部的子控件设置对应的数据 ...

  10. new Date()时间对象

    <!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8&qu ...