<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>jQuery多级复选框checkbox选中代码</title>
<link rel="stylesheet" href="css/bootstrap.min.css">
<style>
/*public*/
.all-checkbox {
padding: 10px;
}
.borderTop {
border-top: thin solid #ddd;
}
.borderBottom {
border-bottom: thin solid #ddd;
}
.borderLeft {
border-left: thin solid #ddd;
}
.borderRight {
border-right: thin solid #ddd;
}
.borderNone {
border-right: none;
}
.ui-checkbox {
background: url("download.png");
background-repeat: no-repeat;
width: 24px;
height: 24px;
position: absolute;
left: 0;
top: 0;
display: inline-block;
}
.ui-checkbox.hover {
background-position-x: -24px;
cursor: pointer;
}
.ui-checkbox.active-path {
background-position-x: -48px;
cursor: pointer;
}
.ui-checkbox.active {
background-position-x: -72px;
cursor: pointer;
}
.ui-checkbox.disabled, .ui-checkbox.readonly {
background-position-x: -120px;
cursor: no-drop;
}
.div-checkbox {
width: 100%;
height: 50px;
position: relative;
border-left: thin solid #ddd;
border-right: thin solid #ddd;
}
.div-checkbox label input[type=checkbox] {
margin-right: 2px;
position: relative;
top: 2px;
left: 0;
display: none;
}
.all-checked {
padding-left: 25px;
font-weight: normal;
position: relative;
cursor: pointer;
}
.all-checked input[type=checkbox] {
display: none;
}
.div-checkbox label {
margin: 0px;
padding-left: 25px;
cursor: pointer;
font-weight: normal;
position: relative;
}
/* horizontal*/
.title {
overflow: hidden;
text-align: center;
border-top: thin solid #ddd;
}
/* .title div{
font-weight: bolder;
float: left;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 5%;
padding-right: 5%;
border-right:thin solid #ddd;
}*/
.div-checkbox:nth-of-type(odd) {
background-color: #f9f9f9;
}
.div-checkbox:last-child {
border-bottom: thin solid #ddd;
}
._border_ {
border-top: thin solid #ddd;
border-right: thin solid #ddd;
}
.title div {
font-weight: bolder;
float: left;
padding-top: 10px;
padding-bottom: 10px;
padding-left: 5%;
padding-right: 5%;
border-right: thin solid #ddd;
}
.title div:last-child {
border-right: none;
}
.check-box {
margin-top: 0px;
margin-bottom: 0px;
float: left;
padding-bottom: 5px;
padding-top: 5px;
width: 20%;
height: 100%;
text-align: center;
}
.check-align-left {
text-align: left;
padding-left: 5px;
padding-right: 5px;
}
.check-absolute {
position: absolute !important;
top: 0;
left: 0;
}
.check-box .absolute-center {
left: 50%;
top: 50%;
margin-left: -6px;
margin-top: -6px;
}
.main {
width: 100%;
height: 100%;
}
.second {
width: 20%;
left: 20%;
height: 100%;
}
.third {
left: 100%;
width: 300%;
}
.check-block {
width: 100%;
}
._top_ {
top: 75px
}
.row-of-three {
width: 33.33%;
height: 35px;
}
/*vertical*/
.vertical-checkbox {
overflow: hidden;
}
.vertical-checkbox > div {
float: left;
}
.vertical-checkbox .title {
width: 10%;
text-align: center
}
.vertical-checkbox .title div:last-child {
border-right: thin solid #ddd;
}
.vertical-checkbox .title > div {
width: 100% !important;
padding-top: 5px;
padding-bottom: 5px;
border-bottom: thin solid #ddd;
}
.vertical-checkbox .div-checkbox {
width: 90%;
height: auto;
}
.vertical-checkbox .all-checked {
display: block;
}
.vertical-checkbox .div-checkbox {
border-left: none;
}
.vertical-checkbox .main {
width: 100%;
border-top: thin solid #ddd;
border-left: thin solid #ddd;
}
.vertical-checkbox .second, .vertical-checkbox .third {
width: 100%;
border-bottom: none;
border-right: thin solid #ddd;
}
.vertical-checkbox .second > .levelDIV {
width: 50% !important;
float: left;
}
.vertical-checkbox .third p.check-box {
width: 33.33%;
float: left;
border-bottom: none;
}
.vertical-checkbox p.check-box {
margin: 0px;
width: 100%;
height: 70%;
text-align: center;
border-bottom: thin solid #ddd;
border-right: thin solid #ddd;
}
/*Is Level Two Start*/
.level-two .levelDIV {
overflow: hidden;
}
.level-two .second {
width: 80%;
}
.level-two .second > .levelDIV:last-child {
border-bottom: none;
}
.level-two .title > div {
border-bottom: thin solid #ddd;
}
.level-two .second p.check-box {
width: 25%;
float: left;
height: 40px;
position: relative;
border-bottom: thin solid #ddd;
}
.level-two .second p.check-box > label {
left: 4%;
top: 15%;
margin-top: -6px;
margin-left: -6px;
}
/*Is Level Two End*/
</style>
</head>
<body><script src="/demos/googlegg.js"></script>
<h4>水平层级</h4>
<div class="all-checkbox">
<label class="all-checked"> <span class="ui-checkbox"></span>
<input type="checkbox" name="all-checked" value="">
全选 </label>
<div class="title borderRight">
<div class="borderLeft" style="width:20.05%;">模块标题</div>
<div style="width:20%;">菜单标题</div>
<div style="width:20%;">功能标题</div>
</div>
<div class="div-checkbox">
<div class="levelDIV check-absolute main">
<p class="check-box check-absolute _border_">
<label class="check-absolute absolute-center"> <span class="ui-checkbox"></span>
<input type="checkbox" class="absolute-center">
模块 </label>
</p>
<div class="levelDIV check-absolute second">
<div class="levelDIV">
<p class="check-box check-block _border_">
<label> <span class="ui-checkbox"></span>
<input type="checkbox">
菜单 </label>
</p>
<div class="levelDIV check-absolute _border_ third">
<p class="check-box check-align-left row-of-three">
<label> <span class="ui-checkbox"></span>
<input type="checkbox">
功能 </label>
</p>
</div>
</div>
<div class="levelDIV">
<p class="check-box check-block _border_">
<label> <span class="ui-checkbox"></span>
<input type="checkbox">
菜单 </label>
</p>
<div class="levelDIV check-absolute _border_ third _top_">
<p class="check-box check-align-left row-of-three">
<label> <span class="ui-checkbox"></span>
<input type="checkbox">
功能 </label>
</p>
<p class="check-box check-align-left row-of-three">
<label> <span class="ui-checkbox"></span>
<input type="checkbox">
功能 </label>
</p>
<p class="check-box check-align-left row-of-three">
<label> <span class="ui-checkbox"></span>
<input type="checkbox">
ddd </label>
</p>
<p class="check-box check-align-left row-of-three">
<label> <span class="ui-checkbox"></span>
<input type="checkbox" checked="true">
功fff </label>
</p>
<p class="check-box check-align-left row-of-three">
<label> <span class="ui-checkbox"></span>
<input type="checkbox">
功ggg </label>
</p>
<p class="check-box check-align-left row-of-three">
<label> <span class="ui-checkbox"></span>
<input type="checkbox">
功rrr </label>
</p>
</div>
</div>
<div class="levelDIV">
<p class="check-box check-block _border_">
<label> <span class="ui-checkbox"></span>
<input type="checkbox">
jQuery多级复选框checkbox选中代码.zip （4个子文件） 
download.png 2KB
js 
jquery.min.js 91KB css bootstrap.min.css 99KB
index.html 20KB资源评论
码云笔记
- 粉丝: 3w+
- 资源: 5850
最新资源
- (源码)基于C++和C混合模式的操作系统开发项目.zip
- (源码)基于Arduino的全球天气监控系统.zip
- OpenCVForUnity2.6.0.unitypackage
- (源码)基于SimPy和贝叶斯优化的流程仿真系统.zip
- (源码)基于Java Web的个人信息管理系统.zip
- (源码)基于C++和OTL4的PostgreSQL数据库连接系统.zip
- (源码)基于ESP32和AWS IoT Core的室内温湿度监测系统.zip
- (源码)基于Arduino的I2C协议交通灯模拟系统.zip
- coco.names 文件
- (源码)基于Spring Boot和Vue的房屋租赁管理系统.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
