jquery带checkbox选择框的树形菜单效果代码
代码语言：html
所属分类：菜单导航
代码描述：jquery带checkbox选择框的树形菜单效果代码
下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
* {
padding: 0px;
margin: 0px;
outline: none;
font: 16px "Calibri";
font-weight: lighter;
list-style-type: none;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
body {
background: #e39900;
overflow: hidden;
overflow-y: auto;
color: #bbb;
}
.controls {
position: fixed;
top: 0;
left: 0;
right: 0;
background: #fff;
z-index: 1;
padding: 6px 10px;
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}
button {
border: 0px;
color: #e13300;
margin: 4px;
padding: 4px 12px;
cursor: pointer;
background: transparent;
}
button.active,
button.active:hover {
background: #e13300;
color: #fff;
}
button:hover {
background: #efefef;
}
input[type=checkbox] {
vertical-align: middle !important;
}
h1 {
font-size: 3em;
font-weight: lighter;
color: #fff;
text-align: center;
display: block;
padding: 40px 0px;
margin-top: 40px;
}
.tree {
margin: 2% auto;
width: 80%;
}
.tree ul {
display: none;
margin: 4px auto;
margin-left: 6px;
border-left: 1px dashed #dfdfdf;
}
.tree li {
padding: 12px 18px;
cursor: pointer;
vertical-align: middle;
background: #fff;
}
.tree li:first-child {
border-radius: 3px 3px 0 0;
}
.tree li:last-child {
border-radius: 0 0 3px 3px;
}
.tree .active,
.active li {
background: #efefef;
}
.tree label {
cursor: pointer;
}
.tree input[type=checkbox] {
margin: -2px 6px 0 0px;
}
.has > label {
color: #000;
}
.tree .total {
color: #e13300;
}
</style>
</head>
<body translate="no">
<h1>Jquery Tree Menu</h1>
<div class="controls">
<button>Collepsed</button>
<button>Expanded</button>
<button>Checked All</button>
<button>Unchek All</button>
</div>
<ul class="tree">
<li class="has">
<input type="checkbox" name="domain[]" value="Agricultural Sciences">
<label>Agricultural Sciences <span class="total">(15)</span></label>
<ul>
<li class="">
<input type="checkbox" name="subdomain[]" value="Agriculture, Dairy& Animal Science">
<label>Agriculture, Dairy & Animal Science </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Agricultural Engineering">
<label>Agricultural Engineering </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Agricultural Economics& Policy">
<label>Agricultural Economics & Policy </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Agriculture, Multidisciplinary">
<label>Agriculture, Multidisciplinary </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Agronomy">
<label>Agronomy </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Plant Sciences,Botany">
<label>Plant Sciences,Botany </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Environmental Sciences">
<label>Environmental Sciences </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Fisheries">
<label>Fisheries </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Food Science& Technology">
<label>Food Science & Technology </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Forestry">
<label>Forestry </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Horticulture">
<label>Horticulture </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Soil Science">
<label>Soil Science </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Veterinary Sciences">
<label>Veterinary Sciences </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Water Resources">
<label>Water Resources </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Biodiversity Conservation">
<label>Biodiversity Conservation </label>
</li>
</ul>
</li>
<li class="has">
<input type="checkbox" name="domain[]" value="Biological Sciences">
<label>Biological Sciences <span class="total">(19)</span></label>
<ul>
<li class="">
<input type="checkbox" name="subdomain[]" value="Biology">
<label>Biology </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Cell& Tissue Engineering">
<label>Cell & Tissue Engineering </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Biophysics">
<label>Biophysics </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Biotechnology">
<label>Biotechnology </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Cell Biology">
<label>Cell Biology </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Biochemical Research Methods">
<label>Biochemical Research Methods </label>
</li>
<li class="has">
<input type="checkbox" name="subdomain[]" value="Biochemistry& Molecular Biology">
<label>Biochemistry & Molecular Biology <span class="total">(1)</span></label>
<ul>
<li>
<input type="checkbox" name="subject[]" value="Analytical Biochemistry">
<label>Analytical Biochemistry</label>
</li>
</ul>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Mathematical& Computational Biology">
<label>Mathematical & Computational Biology </label>
</li>
<li class="has">
<input type="checkbox" name="subdomain[]" value="Microbiology">
<label>Microbiology <span class="total">(2)</span></label>
<ul>
<li>
<input type="checkbox" name="subject[]" value="Pharmaceutical Microbiology">
<label>Pharmaceutical Microbiology</label>
</li>
<li>
<input type="checkbox" name="subject[]" value="Fermentation Technology">
<label>Fermentation Technology</label>
</li>
</ul>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Ecology">
<label>Ecology </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Evolutionary Biology">
<label>Evolutionary Biology </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Developmental Biology">
<label>Developmental Biology </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Entomology">
<label>Entomology </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Limnology">
<label>Limnology </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Marine& Freshwater Biology">
<label>Marine & Freshwater Biology </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Mycology">
<label>Mycology </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Ornithology">
<label>Ornithology </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Reproductive Biology">
<label>Reproductive Biology </label>
</li>
<li class="has">
<input type="checkbox" name="subdomain[]" value="Zoology">
<label>Zoology <span class="total">(1)</span.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0