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> ...
随机推荐
- angular---处于激活状态的路由加样式
- node.js接收前端上传的文件并保存到其他位置+后端代码支持进度条
一:直接上传文件,放入body里 1.前端代码 <input type="file" onchange="sendFiles(this.files)"&g ...
- Unity打包资源，进行后台加载
Unity打包资源,进行后台加载 需要项目优化的pa you,这边走:Unity项目优化--Web版 一.前言 因为在下载Three.js,所以趁着这个时间写一下资源打包加载吧 小黑在刚开始学习Uni ...
- 【随笔记】XR872 Codec 驱动移植和应用程序实例（附芯片调试方法）
XR872 的 SDK 是我目前接触过那么多款 MCU 的 SDK 中,唯一一个将框架和 RTOS 结合的非常完美的 SDK .无论是代码风格还是框架的设计,看起来都很赏心悦目,而且是源码开源.希望能 ...
- 单细胞转录组实战01: CellRanger7定量
安装CellRanger cd ~/APP wget -O cellranger-7.1.0.tar.xz "https://cf.10xgenomics.com/releases/cell ...
- 推荐一款.Net Core开发的后台管理系统YiShaAdmin
若依(RuoYi)是码云上一款精美的开源快速开发平台,作者毫无保留给个人及企业免费使用.RuoYi目前有三个版本:普通版本(RuoYi).前后端分离版本(RuoYi-Vue).微服务版本(RuoYi- ...
- Java基础语法：注释、数据类型、字节
Java基础语法:注释.数据类型.字节 注释 单行注释:// 多行注释:/* 注释 */ 文档注释:/** 注释 */ 数据类型分为两大类:基本类型和引用类型 八大基本数据类型 整数类型 byte(占 ...
- JZOJ 捕老鼠
题目 实际上经转换得: 给了 \(n(n \le 5 \times 10^5)\) 条线段,求覆盖 \([1..n]\) 需要的最少条数 分析 设 \(f_i\) 表示覆盖了 \([1..n]\) 时 ...
- Ubuntu安装Zabbix6.0
环境 系统:Ubuntu 20.04 虚拟平台:Vmware Workstation 16 PRO 软件版本:Zabbix 6.0 LTS 数据库:PostgreSQL Web服务:Apache 新建 ...
- 跳板攻击之：lcx 端口转发
跳板攻击之:lcx 端口转发 郑重声明: 本笔记编写目的只用于安全知识提升,并与更多人共享安全知识,切勿使用笔记中的技术进行违法活动,利用笔记中的技术造成的后果与作者本人无关.倡导维护网络安全人人有责 ...