jq三级全选全不选

<!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三级全选全不选的更多相关文章

JQ实现复选框的全选反选不选
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
Jq 遍历全选全不选反选
//全选全不选 $('#checkAll').click(function () { //判断是否被选中 var bischecked = $('#checkAll').is(':checked') ...
基于JQ的多选/全选/反选及获取选中的值
 <!DOCTYPE html> <html lang="en"> <head> <met ...
利用jQuery实现CheckBox全选/全不选/反选
转自:http://www.cnblogs.com/linjiqin/p/3148259.html jQuery有些版本中实现CheckBox全选/全不选/反选会有bug,经测试jquery-1.3. ...
在jquery中，全选/全不选的表示方法
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/ ...
JS checkbox 全选全不选
/* JS checkbox 全选全不选 Html中checkbox: <input type="checkbox" name="cbx" value= ...
checkbox实现全选全不选
1.jQuery实现checkbox全选全不选 <!DOCTYPE html> <head runat="server"> <title>jQu ...
Dynamic CRM 2013学习笔记（二十六）报表设计：Reporting Service报表动态参数、参数多选全选、动态列、动态显示行字体颜色
上次介绍过CRM里开始报表的一些注意事项:Dynamic CRM 2013学习笔记(十五)报表入门.开发工具及注意事项,本文继续介绍报表里的一些动态效果:动态显示参数,参数是从数据库里查询出来的:参数 ...
jQuery/javascript实现全选全不选
<html> <head> <meta charset="utf-8"> <title>Checkbox的练习</title& ...
jQuery实现Checkbox中项目开发全选全不选的使用
<html> <head> <meta charset="utf-8"> <title>Checkbox的练习</title& ...

随机推荐

assert函数
这个函数在<cassert>里面,通常用来调试程序. eg: int i=1: assert(i==1):/什么也不做 assert(i==2)://程序会异常退出
oracle分组统计某列逗号隔开数据
所有版本的oracle都可以使用select wm_concat(name) as name from user; 但如果是oracle11g,使用select listagg(name, ',') ...
Qt修改xml文件
<taskpackage styleId="styles/2dc70235-e48b-4e11-b074-3c3f773ae1f3" id="3333" ...
服务器端验证--验证框架验证required.
struts2表单验证里field-validator type值一共可以取哪些?都什么含义? int 整数:double 实数:date 日期:expression 两数的关系比较: email E ...
hdu 1348 （凸包求周长）
链接:http://acm.hdu.edu.cn/showproblem.php?pid=1348 Wall Time Limit: 2000/1000 MS (Java/Others) Mem ...
最大后验估计 -- Maximum-a-Posteriori (MAP) Estimation
最大后验估计是根据经验数据获得对难以观察的量的点估计.与最大似然估计类似,但是最大的不同时,最大后验估计的融入了要估计量的先验分布在其中.故最大后验估计可以看做规则化的最大似然估计.
underscore的封装和扩展
// 1. 不污染全局环境 (function() { // 2. 保留之前同名变量 var previousUnderscore = window._; var _ = function(obj) ...
s表达式和json表达式
s表达式 + 1 2 3普通表达式 1+2+3json表达式{ +:[1, 2, 3]}优点,一个运算符,无限个参数 s表达式 * (+ 1 2) 3普通表达式 1+(2*3)json表达式{ *:[ ...
FLASH CC 2015 CANVAS （六）如何像FLASH那样实现场景(多canvas)
注意此系列贴为个人边“开荒”边写,所以不保证就是最佳做法,也难免有错误! 正式教程会在后续开始更新. swf 项目中,我们可以很容易在一个fla文档里创建多场景.也可以通过多个fla文件发布多个s ...
[转]-Gradle使用手册（二）：项目结构
原文地址:http://tools.android.com/tech-docs/new-build-system/user-guide#TOC-Using-sourceCompatibility-1. ...

jq三级全选全不选

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

随机推荐

热门专题