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& ...
随机推荐
- MySQL(三) —— 约束以及修改数据表
约束: 1. 约束保证数据的完整性和一致性: 2. 约束分为表级约束和列级约束: 3. 约束类型包括:NOT NULL, PRIMARY KEY, UNIQUE KEY, DEFAULT, FOREI ...
- java正则API简单解析
java.util.regex是一个用正则表达式所订制的模式来对字符串进行匹配工作的类库包. 1.简介: java.util.regex是一个用正则表达式所订制的模式来对字符串进行匹配工作的类库包. ...
- FJNU 1153 Fat Brother And XOR（胖哥与异或）
FJNU 1153 Fat Brother And XOR(胖哥与异或) Time Limit: 1000MS Memory Limit: 257792K [Description] [题目描述] ...
- ZOJ-2365 Strong Defence 无公共边割边集
题意:该题的题意晦涩,勉勉强强听别人说了一遍后再读了一遍题才算懂了题意,题图说的是A国因为B国药进攻自己的国家,于是想办法在联通A-B之间的路径上进行阻击.阻击的舰船停留在一个路径上,舰船上都要放置水 ...
- Nginx模块学习之————accesskey权限模块使用（简单的m3u8防盗链）
配置文件:http://www.cnblogs.com/tinywan/p/5983694.html 通过加密后的文件: 正确地址:curl -i http://访问的IP地址(这里是直播节点IP地址 ...
- Google MapReduce/GFS/BigTable三大技术的论文中译版
今天查找分布式计算的有关资料,发现Google的三大核心技术MapReduce.GFS和BigTable的论文都已经被翻译成高质量的中文,更巧的是,这三篇中译版的原发地都是CSDN的Blog.其中最新 ...
- Docker-创建一个mysql容器，并保存为本地镜像
查找docker hub上的镜像 [root@wls12c ~]$ docker search mysql NAME DESCRIPTION STARS OFFICIAL AUTOMATED mysq ...
- 5.7 C和C++的关系
- 脱壳脚本_手脱壳ASProtect 2.1x SKE -> Alexey Solodovnikov
脱壳ASProtect 2.1x SKE -> Alexey Solodovnikov 用脚本.截图 1:查壳 2:od载入 3:用脚本然后打开脚本文件Aspr2.XX_unpacker_v1. ...
- Maven——eclipse中使用Maven创建Web项目
原文:http://www.cnblogs.com/xdp-gacl/p/4054814.html 一.创建Web项目 1.1 选择建立Maven Project 选择File -> New - ...