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

随机推荐

Java中HashMap遍历的两种方式
Java中HashMap遍历的两种方式转]Java中HashMap遍历的两种方式原文地址: http://www.javaweb.cc/language/java/032291.shtml 第一种: ...
在vs中怎样一次性的添加一个文件夹到解决方案里
这个方法通常用到编译源码库方面,在这里我以编译静态库为例: 1.首先建立自己的工程Mytest 第二步选择静态库点击finish 完成工程的建立第三步点击PROJECT菜单项选中Show A ...
HDU 2289 CUP 二分
Cup Time Limit: 3000/1000 MS (Java/Others) Memory Limit: 32768/32768 K (Java/Others)Total Submiss ...
outlook经常无故崩溃解决办法
问题描述: Outlook 最近有点怪,有时无法启动有时又突然崩溃.原以为是远程访问服务出了问题,但即使在本地操作,Outlook 仍然极不稳定.怎么回事? 原因:这种现象,很可能是由 Office ...
MTK+Android编译
1. 修改recovery代码比如mediatek\custom\itek82_wet_kk\recovery\inc\cust_keys.h ./mk r k ./mk recoveryimage ...
Repeater导航菜单DataList产品展示
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="JD.aspx.cs&quo ...
Hibernate 配置转（http://blog.csdn.net/b671900/article/details/39156065）
做项目必然要先进行数据库表设计,然后根据数据库设计建立实体类(VO),这是理所当然的,但是到公司里做项目后,让我认识到,没有说既进行完数据库设计后还要再“自己”建立一变VO.意思是,在项目设计时,要么 ...
MS16-016 提权EXP
测试环境 win7 32 位未打任何补丁 1.使用net user 指令测试得到结果没有权限新建用户 2.查看系统用户 3.复制EXP到win7 下使用命令打开添加新用户再查看用户列表
CUBRID学习笔记 26 数据类型3cubrid教程
接上面的集合集合之 set 每个集合元素是不同的值, 但是类型只能是一种.也可以有其他表的记录如下 CREATE TABLE set_tbl ( col_1 set(CHAR(1))); INSE ...
GitHub上不错的Android开源项目（三）
收集相关系列资料,自己用作参考,练习和实践.小伙伴们,总有一天,你也能写出 Niubility 的 Android App :-) GitHub上不错的Android开源项目(一):http://ww ...

jq三级全选全不选

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

随机推荐

热门专题