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> ...
随机推荐
- px批量转vw方法，适用于用户临时突发自适应需求，快速搞出项目多屏幕适应方案postcss-px-to-viewport，postcss.config.js配置
方案一: 1. 下载依赖 npm install postcss-import postcss-loader postcss-px-to-viewport --save-dev npm install ...
- 十九岁纪念|HBD To ME
过了20年,终于摆脱了令人讨厌的应试生活.19岁,一半是高三,一半是大学,由高考,分成两半.说实话,我觉得大学也没有那么令人向往,换种方式读高四吧.长大了,对时间也没有什么概念了.要不是19岁在我的家 ...
- Java语言的跨平台性-JDK,JRE和JVM
Java语言的跨平台性 1 Java虚拟机--JVM JVM(Java Virtual Machine ):Java虚拟机,简称JVM,是运行所有Java程序的假想计算机,是Java程序的 运行环境, ...
- C#如何提高代码质量（一）
代码部分 1.正确操作字符串 尽量少装箱 String str1 = "str2"+9.ToString(); 避免分配额外的内存空间 StringBuilder 2.使用默认转型 ...
- FLASH-CH32F203替换CH32F103 FLASH快速编程移植说明
因CH32F203 相对于CH32F103 flash操作的快速编程模式由单次128字节编程变成了单次256字节编程,该文档说明主要目的是为了方便客户在原先CH32F103工程的基础上实现flash ...
- TCP/IP RTT算法比较
TCP重传机制Timeout特点: 设长了,重发就慢,效率和性能差: 设短了,重发就快,可能导致没有丢就重发,增加网络拥塞,导致更多的超时,更多的超时导致更多的重发. TCP协议引入2个概念: RTT ...
- 12月8日内容总结——Django推导流程，Django模块的下载和基本使用、Django的应用和目录结构讲解、Django三板斧
目录 一.纯手撸web框架 二.基于wsgiref模块 三.代码封装优化 四.动静态网页 五.jinja2模块 六.前端.后端.数据库三者联动 七.python主流web框架 八.django简介 1 ...
- GDOI 2021 PJ 总结
Day 0.5 在门口等了好久,终于进去了. Day 1 下午来到考场,发现自己承诺书没有拿,然后就跑到宿舍去拿,回来发现只要身份证. T1一眼是个博弈,发现不太好打,先跳. T2发现最多消耗4320 ...
- Spring IOC官方文档学习笔记（十）之类路径扫描与组件管理
1.@Component注解与其衍生注解 (1) 在Spring中,@Component注解用于说明某个类是一个bean,之后Spring在类路径扫描过程中会将该bean添加至容器中;@Compone ...
- windows10、windows server 2016激活方法
1.激活准备 管理员打开cmd命令窗口(或者Windows+X组合键选择下图标注选项),复制对应版本命令回车即可 2.激活命令: 2.1 win 10 专业版 slmgr /ipk W269N-WFG ...