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> ...
随机推荐
- Python 内置界面开发框架 Tkinter入门篇 乙
本文大概 1685 个字,阅读需花 6 分钟内容不多, 但也花了一些精力如要交流, 欢迎关注我然后评论区留言 谢谢你的点赞收藏分享 这篇文章属于系列文章<Python 内置界面开发框架 Tkin ...
- golang主协程等待子协程执行完毕
无限等待 计时等待 channel通信 select 等待组
- 通过this引用成员方法-类的构造器
通过this引用成员方法 this代表当前对象,如果需要引用的方法就是当前类中的成员方法,那么可以使用"this成员方法"的格式来使用方法引用.首先是简单的函数式接口︰ 下面是一个 ...
- java入门与进阶P-5.5+P-5.6
投票统计 写一个程序,输入数量不确定的[0,9]范围内的整数,统计每一中数字出现的次数,输入-1表示结束 循环遍历 通常都是使用for循环,让循环变量i从0到<数组的length,这样循环体内最 ...
- Grafana 系列文章（五）：Grafana Explore 查询管理
️URL: https://grafana.com/docs/grafana/latest/explore/query-management/ Description: Explore 中的查询管理 ...
- 12月22日内容总结——django中间件的三个了解要求的方法、基于django中间件的功能设计、cookie与session
目录 一.django中间件三个了解的方法 二.django中间件五个方法的执行流程详解 三.基于django中间件的功能设计 功能设计介绍 如何利用字符串导入模块 功能模拟 四.cookie与ses ...
- saas解决redis数据库分离的一种方案
package com.xf.config; import java.util.HashMap; import java.util.Map; import java.util.Set; import ...
- springcloud 10 spring cloud gateway02 基本使用
官网:https://cloud.spring.io/spring-cloud-static/spring-cloud-gateway/2.2.1.RELEASE/reference/html/ 注册 ...
- Dapr v1.10.0 版本已发布
Dapr是一套开源.可移植的事件驱动型运行时,允许开发人员轻松立足云端与边缘位置运行弹性.微服务.无状态以及有状态等应用程序类型.Dapr能够确保开发人员专注于编写业务逻辑,而不必分神于解决分布式系统 ...
- 线段树优化DP学习笔记 & JZOJ 孤独一生题解
在 \(DP\) 的世界里 有一种题需要单调队列优化 \(DP\) 一般在此时,\(f_i\) 和它的决策集合 \(f_j\) 在转移时 \(i\) 不和 \(j\) 粘在一起(即所有的 \(j\) ...