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& ...

随机推荐

Centos下防火墙的设置
service iptables status可以查看到iptables服务的当前状态.但是即使服务运行了,防火墙也不一定起作用,你还得看防火墙规则的设置 iptables -L在此说一下关于启动和关 ...
Python3基础用三个双引号 print输出多行文本
镇场诗:---大梦谁觉,水月中建博客.百千磨难,才知世事无常.---今持佛语,技术无量愿学.愿尽所学,铸一良心博客.------------------------------------------ ...
MVC开发模式
关于mvc详情可参阅:http://www.w3school.com.cn/aspnet/mvc_intro.asp MVC (Modal View Controler)本来是存在于Desktop程 ...
哈理工软件学院"兆方美迪"杯第六届程序设计大赛【高年级组】--决赛题解
比赛链接:http://acm-software.hrbust.edu.cn/contest.php?cid=1082 A.好SB啊真是,还以为lis-数有多少个数不一样. #include < ...
ServiceStack.OrmLite 笔记
ServiceStack.OrmLite 笔记1 ServiceStack.OrmLite 这个东东就是个orm框架,可以实现类似ef的效果.具体的就不这里班门弄斧了. 支持 SqlServerDia ...
run a Freight robot (2)
3. Network Setup Connecting Freight to a Monitor The easiest way to configure the wireless networki ...
.net反射详解(转)
摘自:http://www.cnblogs.com/knowledgesea/archive/2013/03/02/2935920.html 概述反射通过反射可以提供类型信息,从而使得我们开发人员在 ...
cdoj 851 方老师与素数 bfs
方老师与素数 Time Limit: 3000/1000MS (Java/Others) Memory Limit: 65535/65535KB (Java/Others) Submit St ...
hdu 5137 How Many Maos Does the Guanxi Worth 最短路 spfa
How Many Maos Does the Guanxi Worth Time Limit: 2000/1000 MS (Java/Others) Memory Limit: 512000/5 ...
yii 中引入js 和css 的方式
在yii中我们需要引入css 和 js 的时候,yii 自身有需要的类. 当我在views 视图层中引入css 和 js , <?php Yii::app()->clientScript ...

jq三级全选全不选

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

随机推荐

热门专题