js复选框，三层结构
最终实现效果如下
html+css如下
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <meta charset="UTF-8">
5 <title></title>
6 <link rel="stylesheet" href="css/font-awesome.min.css">
7 </head>
8 <style>
9 *{padding:0;margin: 0;}
10 .flexBox{
11 display: -webkit-flex;
12 display: -moz-flex;
13 display: -ms-flex;
14 display: -o-flex;
15 display: flex;
16 height: 40px;line-height: 40px;
17 }
18 .classHead p{width: 50%;}
19 .grandpa .grandpa-item>.flexBox{border-top: solid 2px #999;padding-left: 30px;}
20 .grandpa .flexBox label,
21 .grandpa .flexBox p{width: 50%;}
22 .grandpa .father .father-item>.flexBox{padding-left: 60px;background: #f9f9f9;border-top: solid 1px #ccc;}
23 .grandpa .father .children .children-item .flexBox{padding-left: 90px;}
24 .grandpa .father .children .children-item:nth-of-type(even) .flexBox{background: #f9f9f9;}
25 .grandpa li{position: relative;}
26 .grandpa li.grandpa-item .fa{position: absolute;left: 10px;top: 11px;display: block;width: 20px;height: 20px;cursor: pointer;}
27 .grandpa li.father-item .fa{position: absolute;left: 38px;top: 11px;display: block;width: 20px;height: 20px;cursor: pointer;}
28 ul,ul li{list-style: none;padding: 0;margin: 0;}
29 </style>
30 <body>
31 <script src="http://apps.bdimg.com/libs/jquery/1.10.2/jquery.min.js"></script>
32
33 <div style="width: 600px;margin:50px 100px;">
34 <div class="classHead flexBox"><p>分类ID</p><p>分类名称</p></div>
35 <ul class="grandpa">
36 <li class="grandpa-item">
37 <span class="fa fa-chevron-up"></span>
38 <div class="flexBox">
39 <label class="grandpa-item-label">
40 <input type="checkbox">一
41 </label>
42 <p>男装</p>
43 </div>
44 <ul class="father">
45 <li class="father-item">
46 <span class="fa fa-chevron-up"></span>
47 <div class="flexBox">
48 <label class="father-item-label">
49 <input type="checkbox">1
50 </label>
51 <p>男士衬衫</p>
52 </div>
53 <ul class="children">
54 <li class="children-item">
55 <div class="flexBox">
56 <label class="children-item-label">
57 <input type="checkbox">a
58 </label>
59 <p>男士衬衫1</p>
60 </div>
61 </li>
62 <li class="children-item">
63 <div class="flexBox">
64 <label class="children-item-label">
65 <input type="checkbox">b
66 </label>
67 <p>男士衬衫2</p>
68 </div>
69 </li>
70 <li class="children-item">
71 <div class="flexBox">
72 <label class="children-item-label">
73 <input type="checkbox">e
74 </label>
75 <p>男士衬衫3</p>
76 </div>
77 </li>
78 <li class="children-item">
79 <div class="flexBox">
80 <label class="children-item-label">
81 <input type="checkbox">f
82 </label>
83 <p>男士衬衫4</p>
84 </div>
85 </li>
86 <li class="children-item">
87 <div class="flexBox">
88 <label class="children-item-label">
89 <input type="checkbox">g
90 </label>
91 <p>男士衬衫5</p>
92 </div>
93 </li>
94 </ul>
95 </li>
96 <li class="father-item">
97 <span class="fa fa-chevron-up"></span>
98 <div class="flexBox">
99 <label class="father-item-label">
100 <input type="checkbox">2
101 </label>
102 <p>男士裤子</p>
103 </div>
104 <ul class="children">
105 <li class="children-item">
106 <div class="flexBox">
107 <label class="children-item-label">
108 <input type="checkbox">c
109 </label>
110 <p>男士短裤</p>
111 </div>
112 </li>
113 <li class="children-item">
114 <div class="flexBox">
115 <label class="children-item-label">
116 <input type="checkbox">d
117 </label>
118 <p>男士长裤</p>
119 </div>
120 </li>
121 </ul>
122 </li>
123 </ul>
124 </li>
125 <li class="grandpa-item">
126 <span class="fa fa-chevron-up"></span>
127 <div class="flexBox">
128 <label class="grandpa-item-label">
129 <input type="checkbox">二
130 </label>
131 <p>女装</p>
132 </div>
133 <ul class="father">
134 <li class="father-item">
135 <span class="fa fa-chevron-up"></span>
136 <div class="flexBox">
137 <label class="father-item-label">
138 <input type="checkbox">1
139 </label>
140 <p>女士上衣</p>
141 </div>
142 <ul class="children">
143 <li class="children-item">
144 <div class="flexBox">
145 <label class="children-item-label">
146 <input type="checkbox">x
147 </label>
148 <p>牛仔外套</p>
149 </div>
150 </li>
151 <li class="children-item">
152 <div class="flexBox">
153 <label class="children-item-label">
154 <input type="checkbox">y
155 </label>
156 <p>风衣</p>
157 </div>
158 </li>
159 </ul>
160 </li>
161 </ul>
162 </li>
163 </ul>
164 </div>
165 </body>
166 </html>
以下是js部分，具体实现逻辑是三层结构，一个大分类里有一个选中则禁用其他分类选项，三层全选和全不选
1 !(function(){
2 // 爷级全选
3 $('.grandpa-item-label').find("input[type=checkbox]").change(function(){
4 $(this).parents(".grandpa-item").find(".father-item").find(':checkbox').prop('checked',$(this).is(':checked')?true:false);
5 });
6 // 父级全选
7 $('.father-item-label').find("input[type=checkbox]").change(function(){
8 $(this).parents(".father-item").find(".children-item").find(':checkbox').prop('checked',$(this).is(':checked')?true:false);
9 });
10 $(".grandpa").find("input[type=checkbox]").bind("change",function(){
11 if(!$(this).is(":checked")){ //子集有一个没选中去掉父级全选
12 $(this).parents(".father-item").find(".father-item-label input[type=checkbox]").prop('checked',false)
13 $(this).parents(".grandpa-item").find(".grandpa-item-label input[type=checkbox]").prop('checked',false)
14 }
15 //disabled
16 var allCheck = false;
17 $(this).parents(".grandpa-item").find("input[type=checkbox]").each(function(i,item){
18 if($(item).is(":checked")){
19 allCheck = true;
20 $(this).parents(".grandpa-item").siblings(".grandpa-item").find("input[type=checkbox]").attr("disabled","disabled");
21 return false;
22 }
23 })
24 if(!allCheck){
25 $(".grandpa").find("input[type=checkbox]").removeAttr("disabled");
26 }
27 //
28 var fatherCheck = false;
29 $(this).parents(".father-item").find(".children-item-label input[type=checkbox]").each(function(i,item){
30 if(!$(item).is(":checked")){
31 fatherCheck = true;
32 return false;
33 }
34 })
35 if(!fatherCheck){
36 $(this).parents(".father-item").find(".father-item-label input[type=checkbox]").prop('checked',true);
37 }
38 //
39 var grandpaCheck = false;
40 $(this).parents(".grandpa-item").find(".father-item-label input[type=checkbox]").each(function(i,item){
41 if(!$(item).is(":checked")){
42 grandpaCheck = true;
43 return false;
44 }
45 })
46 if(!grandpaCheck){
47 $(this).parents(".grandpa-item").find(".grandpa-item-label input[type=checkbox]").prop('checked',true);
48 };
49 })
50 //slider
51 $(".grandpa .fa").click(function(){
52 if($(this).hasClass("fa-chevron-up")){
53 $(this).addClass("fa-chevron-down").removeClass("fa-chevron-up");
54 $(this).parent().find("ul").slideUp(200)
55 }else{
56 $(this).addClass("fa-chevron-up").removeClass("fa-chevron-down");
57 $(this).parent(".grandpa-item").find("ul .fa").addClass("fa-chevron-up").removeClass("fa-chevron-down");
58 $(this).parent().find("ul").slideDown(200);
59 }
60 })
61 })()
js复选框，三层结构的更多相关文章
- js 复选框 全选都选 如果某一个子复选框没选中 则全选按钮不选中
<!DOCTYPE HTML> <html> <head> <meta charset=UTF-8> <title>js 复选框 全选都选 ...
- js复选框全选反选
本篇文章是关于复选框的,有2种形式:1.全选.反选由2个按钮实现:2.全选.反选由一个按钮实现. <!DOCTYPE html> <html> <head> < ...
- Vue.js 复选框
demo <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...
- JS复选框选中
Web前端之复选框选中属性 熟悉web前端开发的人都知道,判断复选框是否选中是经常做的事情,判断的方法很多,但是开发过程中常常忽略了这些方法的兼容性,而是实现效果就好了.博主之前用户不少方法,经常 ...
- js复选框实现全选、全不选、反选
复选框为checkbox对象 通过input就可以将一个简单的复选框呈现在页面上 <input type="checkbox" /> 要实现的大概就是这样一个页面 思路 ...
- js复选框全选
<input name='chkAll' type='checkbox' id='chkAll' onclick='CheckAll(this.form)' value='checkbox'&g ...
- js复选框插件
<div class="selectList selectQgClass" id="selectQgClass"> <div class=&q ...
- js复选框操作
$(".checkall").click(function () { if (this.checked) { $ ...
- js 复选框回显
<div class="control-group"> <label class="control-label">客户状态:</l ...
- JS: 复选框——ALL与A、B、C（选中ALL同时选中各子项）
<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title> ...
随机推荐
- Coolify系列02-从0到1超详细手把手教你上手Coolify
接着上集(Coolify系列01- 从0到1超详细手把手教你上手Heroku 和 Netlify 的开源替代方案 ),此时我们已经运行成功,如果没有成功,可以参考我的Coolify系列其他文章来解决问 ...
- Java基础学习笔记-流程控制
Java程序结构 顺序结构 分支选择结构 循环结构 顺序结构 分支选择结构 if-else Switch case Switch case 注意点 要配合break,要不就会一直往下走 case 值必 ...
- 超详细解锁Webpack步骤，踩坑记录
webpack 核心 entry: 入口 output: 输出 loader: 模块转换器,用于把模块原内容按照需求转换成新内容 插件(plugins): 扩展插件,在webpack构建流程中的特定时 ...
- P6327 区间加区间sin和 题解
P6327 区间加区间sin和 题解 题目描述 给出一个长度为 \(n\) 的整数序列 \(a_1,a_2,\ldots,a_n\),进行 \(m\) 次操作,操作分为两类. 操作 \(1\):给出 ...
- MySQL 合并查询union 查询出的行合并到一个表中
在合并查询中,尤其是二分类的情况,在查询结果是相同列名的时候可以考虑合并查询.先查询出行的结果,再使用union或者union all合并查询结果. 另外如果 union 和 order by 一起使 ...
- Thread的常用方法_sleep-实现Runable接口
Thread的常用方法_sleep public static void sleep(long millis) :使当前正在执行的线程以指定的毫秒数暂停(暂时停止执行 实现Runable接口 采用 j ...
- 【分析笔记】Linux 内核自旋锁的理解和使用原则
自旋锁简单说明: 自旋锁主要解决在竞态并发下,保护执行时间很短的临界区.它只允许一个执行单位进入临界区,在该执行单位离开前,其它的执行单位将会在进入临界区前不停的循环等待(即所谓的自旋),直至该执行单 ...
- @ControllerAdvice解密请求，加密响应
package com.xf.config; import java.io.IOException; import java.io.InputStream; import java.lang.refl ...
- java反序列化基础
前言:最近开始学习java的序列化与反序列化,现在从原生的序列化与反序列化开始,小小的记录一下 参考文章:https://blog.csdn.net/mocas_wang/article/detail ...
- 逻辑运算符、成员运算符、身份运算符、流程控制、if判断、while循环
目录 一.逻辑运算符 二.成员运算符 三.身份运算符 四.流程控制 五.分支结构 (1).单if判断 (2).双分支结构 (3).多分支结构 (4).if的嵌套使用 六.循环结构while (1).w ...