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

随机推荐

一个Public的字段引起的，谈谈继承中的new
一直觉得对c#面向对象这块已经掌握的很好了,因为正常情况下字段一般我们设计成私有的,今天突然想到一个实验,如下有两个很简单的类: public class Farther { ; public vir ...
BZOJ 1266 上学路线route（最小割）
题目链接:http://61.187.179.132/JudgeOnline/problem.php?id=1266 题意:给出一个无向图,每条边有长度和代价.求出1到n的最短路.之后删掉一些边使得1 ...
CentOS 7一些常用配置
一.更改启动模式背景:个人开发环境,安装了GNOME桌面,默认启动是图形化模式. 修改为命令行模式. systemctl set-default multi-user.target 二.命令行模式下 ...
Python命令行解析argparse常用语法使用简介
查看原文:http://www.sijitao.net/2000.html python中的命令行解析最简单最原始的方法是使用sys.argv来实现,更高级的可以使用argparse这个模块.argp ...
常用CMD命令
查看电脑最大支持多大的内存: wmic memphysical get maxcapacity 查询DNS: nslookup a.root-servers.net 路由线路: ...
精通正则表达式（第三版）——Mastering Regular Expressions,3rd Edition——读书笔记1
基础知识介绍: 子表达式匹配环视引号内的字符串:"(^")*" 12小时制:(1[0123]|[1-9]):[0-5][0-9]*(am|pm) 24小时制:(([0 ...
分区格式化mkfs
mkfs — build a Linux filesystem 用法举例: mkfs.ext3 /dev/sdb1 #把sdb1格式化为ext3文件系统也可以写成 mkfs -t ext3 /d ...
mysql概要（十二）事务
1.特性 2.开启结束取消事务:需要选择支持事务的引擎 3,隐式提交事务: 4.事务的隔离级别:
mysql概要（三）having
1.运算符 2.模糊查询 3.where 后的判断基于表(表的直接内容),而不是基于结果(运算之后的别名)如: 可改成在where后再次重新计算判断: 或者使用having对结果判断: having多 ...
c function
/* #include<stdio.h> int is_prime(int n) { for(int i = 2; i <= n/2; i ++) if(n % 2 == 0) re ...

jq三级全选全不选

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

随机推荐

热门专题