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& ...
随机推荐
- Cheatsheet: 2013 09.22 ~ 09.30
Other Python basics summary Another article about big O notation Mobile Getting Started with PhoneGa ...
- mysql密码忘记或者不知道，怎么办？
运行cmd: 输入mysql回车,如果成功,将出现MySQL提示符 > 连接权限数据库>use mysql; (>是本来就有的提示符,别忘了最后的分号) 修改改密码:> upd ...
- NoSQL聚合数据模型
NoSQL聚合数据模型 特点 聚合数据模型的特点就是把经常访问的数据放在一起(聚合在一块): 这样带来的好处很明显,对于某个查询请求,能够在与数据库一次交互中将所有数据都取出来: 当然,以这种方式存储 ...
- python_way day12 RabbitMQ ，pymysql
python_way day12 1.RabbitMQ 2.pymysql RabbitMQ 1.基本用法 """ producer """ ...
- Codeforces Beta Round #91 (Div. 1 Only) E. Lucky Array 分块
E. Lucky Array time limit per test 4 seconds memory limit per test 256 megabytes input standard inpu ...
- RTMP命令亲自测试记录
手动和自动录像模块: recorder rec1 { record all manual; record_unique on; record_notify on; record_max_size 51 ...
- Mono for Android布局控件属性小结
1. layout_weight 用于给一个线性布局中的诸多视图的重要度赋值. 所有的视图都有一个layout_weight值,默认为零,意思是需要显示 多大的视图就占据多大的屏幕空 间.若赋一个高于 ...
- 集群--LVS的DR模型配置
1.查看内核是否有IPVS内核模块 grep -i 'ip_vs' /boot/config-2.6.32-431.el6.x86_64
- view的封装
如果一个view内部的子控件比较多,一般会考虑自定义一个view,把它内部子控件的创建屏蔽起来,不让外界关心 外界可以传入对应的模型数据给view,view拿到模型数据后给内部的子控件设置对应的数据 ...
- new Date()时间对象
<!DOCTYPE html><html lang="zh-CN"><head> <meta charset="UTF-8&qu ...