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

随机推荐

js css 构建滚动边框
注:预览效果请点击result选项卡,个人认为这种效果非常适合做友情链接. 完整代码 <!DOCTYPE html> <html xmlns="http://www.w3. ...
VC++ 利用MAPI实现在程序中调用默认的电子邮件程序发送EMAIL(可以添加附件)。
1.利用ShellExecute 可以条用默认邮件客户端,但不能发送带附件的邮件 mailto:用户账号@邮件服务器地址?subject=邮件主题&body=邮件正文如:ShellExe ...
Linux下Kafka单机安装配置方法(图文)
Kafka是一个分布式的.可分区的.可复制的消息系统.它提供了普通消息系统的功能,但具有自己独特的设计.这个独特的设计是什么样的呢介绍 Kafka是一个分布式的.可分区的.可复制的消息系统.它提供了 ...
Linux下指定版本编译安装LAMP
说明: 操作系统:CentOS 6.5 64位需求: 编译安装LAMP运行环境各软件版本如下: MySQL:mysql-5.1.73 Apache:httpd-2.2.31 PHP:php-5.2 ...
.Net连接数据库-曾,删,改,查(AOD.Net)
连接数据库 static void Main(string[] args) { //SqlConnection conn = new SqlConnection();//实例化 //conn.Conn ...
sql server 查询分析器消息栏里去掉“(5 行受影响)”
sql server 查询分析器消息栏里去掉"(5 行受影响)" 在你代码的开始部分加上这个命令: set nocount on 记住在代码结尾的地方再加上: set ...
自定义类型转换器converter
作用:目前将日期转换成string,将string转换成我想要的类型 0509课件里讲一.数据类型转换在web应用程序中,数据存在两个方向上的转换:1.当提交表单时表单数据以字符串的形式提交 ...
Linux命令工具基础04 磁盘管理
Linux命令工具基础04 磁盘管理日程磁盘管理中,我们最常用的有查看当前磁盘使用情况,查看当前目录所占大小,以及打包压缩与解压缩: 查看磁盘空间查看磁盘空间利用大小 df -h -h: huma ...
Heap and HashHeap
Heap 堆(英语:Heap)是计算机科学中一类特殊的数据结构的统称.堆通常是一个可以被看做一棵树的数组对象.在队列中,调度程序反复提取队列中第一个作业并运行,因为实际情况中某些时间较短的任务将等待很 ...
Jsoup模拟登陆例子
Jsoup模拟登陆小例子,不同的网站,需要不同的模拟策略,散仙在这里仅仅作为一个引导学习. package com.jsouplogin; import java.util.HashMap; impo ...

jq三级全选全不选

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

随机推荐

热门专题