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& ...
随机推荐
- white的配置使用
初次使用White来自动化测试10个9相加1.新建Visual C#->测试->单元测试项目2.在资源视图->引用,右键,添加引用,添加White的两个.dll文件3.在工程中添加命 ...
- acdream1197 Points In Cuboid
题目链接:http://acdream.info/problem?pid=1197 题意:给出一些点.每次给出一个长方体,问在长方体中的点的个数. 思路:kd-tree. const int N=11 ...
- 不小心删除数据--利用MySQL的binlog恢复数据
MySQL Binary Log也就是常说的bin-log, ,是mysql执行改动产生的二进制日志文件,其主要作用有两个: * 数据回复 * 主从数据库.用于slave端执行增删改,保持与maste ...
- 起点CG原创教程——digicel.FlipBook.6教程
http://blog.renren.com/blog/262793929/473221163
- CALayer总结（三）
CPU VS GPU 动画和屏幕上组合的图层实际上被一个单独的进程管理,而不是你的应用程序.这个进程就是所谓的渲染服务.在iOS5和之前的版本是SpringBoard进程(同时管理着iOS的主屏).在 ...
- 6.mybatis异常：SQL Mapper Configuration,Error parsing Mapper XML,Could not resolve type alias
在xxxMapper中 <select id="getClazz" parameterType="int" resultType="getCla ...
- python_way day17 html-day3 前端插件（fontawsome，easyui，bootstrap，jqueryui，bxslider，jquerylazyload），web框架
python_way day17 一.模板插件 图标的插件 fontawsome: 后台管理: easyui jqueryui 很多网站都会用: bootstrap :引入jQuery:(2.x,1. ...
- bzoj 1054: [HAOI2008]移动玩具 bfs
1054: [HAOI2008]移动玩具 Time Limit: 10 Sec Memory Limit: 162 MB[Submit][Status][Discuss] Description 在 ...
- 时间函数 time.h 详解
C++对时间的操作也有许多值得大家注意的地方.最近,在技术群中有很多网友也多次问到过C++语言中对时间的操作.获取和显示等等的问题.下面,在这篇文章中,笔者将主要介绍在C/C++中时间和日期的使用方法 ...
- More Effective C++ (1)
简单分析总结了more effective c++ 的前十个条款: 剩下的条款to be continue~ 1.仔细区分指针和引用引用必须不能指向空,指针可以指向空,指针初始化是记得赋空值,重载某些 ...