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> ...
随机推荐
- 包装类总结-Collection集合概述
包装类总结 1.基本数据类型对应的包装类byte Byteshort Shortint Integerlong Longfloat Floatdouble Doublechar Characterbo ...
- tomcat8 性能优化参考
https://www.jianshu.com/p/c770c1e97531 tomcat8 性能优化参考
- 重启系统（等级考试4级 2021-03 T4）
这道题如果没有一次重启系统的机会就相当于两个最长不下降子序列加在一起. 所以只需要改亿点点即可 把dp分为 dpleft 和 dpright 最长不下降子序列程序:最长上升子序列 II 时间复杂度(n ...
- Flex布局专题
Flex布局专题 参照 https://www.runoob.com/w3cnote/flex-grammar.html 下面是自己看代码的一下 小结,和认识,加笔记,加原文 认识容器 flex布局需 ...
- Google Guice 用户指南 - Ⅰ：概览
译者:kefate 原文:https://github.com/google/guice/wiki/Overview 大家好,我是kefate.今天开始我将会把Google Guice的官方文档陆续翻 ...
- C++练习9 函数的重载
函数的重载是用一个函数名定义多个函数,但是这些同名函数的形参列表(参数个数,类型,顺序)必须不同. 函数重载的规则: 1.函数名称必须相同. 2.参数列表必须不同(个数不同.类型不同.参数排列顺序不同 ...
- odoo 给列表视图添加按钮实现数据文件导入
实践环境 Odoo 14.0-20221212 (Community Edition) 代码实现 模块文件组织结构 说明:为了更好的表达本文主题,一些和主题无关的文件.代码已略去 odoo14\cus ...
- Cesium计算多边形面积(十一)
//计算三角形面积 function triangleArea(p0, p1, p2) { let v0 = Cesium.Cartesian3.subtract(p0, p1, new Cesium ...
- Java面向对象进阶第一天
面向对象高级第一天 static关键字 是静态的意思,可以修饰成员变量,也可以修饰成员方法 成员变量的分类 静态成员变量 有static修饰,属于类,与类一起加载,内存中只有一份,可以被共享访问. 什 ...
- 梅毒感染者能否应用TNF抑制剂
对于伴发的未经控制的任何严重感染,都不适合使用TNF抑制剂.在1998年国际上首个TNF抑制剂获批治疗类风湿关节炎(RA)以来,这就是广大临床医生和风湿性疾病患者的共识.在临床实践中,需要权衡药物的利 ...