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的多选/全选/反选及获取选中的值
<!-- author:青芒 --> <!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& ...
随机推荐
- 修改ftp密码
1.运行cmd2.在DOS窗口中输入FTP 127.0.0.13.出现用户名输入提示“user”,键入用户名,按回车4.出现输入密码提示:“Password”,键入密码后按回车登录到服务器中5.在ft ...
- WINCE6.0组件选择说明
WINCE6.0组件选择说明 图1 RAS/PPP组件前面的√标识表示我们手动选择,TAPI2.0前面的■标识表示选组件时根据依赖关系自动选择的,PPPoE前面的□标识组件没有选择.
- 【leetcode❤python】24. Swap Nodes in Pairs
#-*- coding: UTF-8 -*- # Definition for singly-linked list.# class ListNode(object):# def __init ...
- 学习html5第一天
HTMl5作为web标准的一种,在2004年诞生,web超文本应用技术工作组WHATWG将它发展起来,W3C由开始的不赞同到与WHATWG共同合作,并在2015年开始推广.并随着浏览器的不断支持和兼容 ...
- Java_你应该知道的26种设计模式
四. 模板方法模式 Definition: Define the skeleton of an algorithm in an operation, deferring some steps to s ...
- SOME USEFUL MACHINE LEARNING LIBRARIES.
from: http://www.erogol.com/broad-view-machine-learning-libraries/ http://www.slideshare.net/Vincenz ...
- 分区格式化mkfs
mkfs — build a Linux filesystem 用法举例: mkfs.ext3 /dev/sdb1 #把sdb1格式化为ext3文件系统 也可以写成 mkfs -t ext3 /d ...
- hdu 1869 （Floyd）
http://acm.hdu.edu.cn/showproblem.php?pid=1869 六度分离 Time Limit: 5000/1000 MS (Java/Others) Memory ...
- 用Jenkins+Gradle+Jetty实现持续集成、测试、部署
自动集成有很多种方案,本例用到的工具是Jenkins(前身Hudson)+Gradle+Jetty,关于Gradle可参考上一篇,Gradle常见问题. 本例项目名称: WAP Jetty 安装Jen ...
- Tomcat配置虚拟目录
在Tomcat7版本下,配置虚拟路径修改以下两个文件: 1.server.xml 打开Tomcat目录下的/conf/server.xml文件,在Host之前加入下面红色部分的内容. ...