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></label>
<ul>
<li>
<input type="checkbox" name="subject[]" value="Zoology">
<label>Zoology</label>
</li>
</ul>
</li>
</ul>
</li>
<li class="has">
<input type="checkbox" name="domain[]" value="Social Sciences">
<label>Social Sciences <span class="total">(55)</span></label>
<ul>
<li class="">
<input type="checkbox" name="subdomain[]" value="Anthropology">
<label>Anthropology </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Area Studies">
<label>Area Studies </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Business">
<label>Business </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Business, Finance">
<label>Business, Finance </label>
</li>
<li class="has">
<input type="checkbox" name="subdomain[]" value="Management">
<label>Management <span class="total">(2)</span></label>
<ul>
<li>
<input type="checkbox" name="subject[]" value="Management Accounting">
<label>Management Accounting</label>
</li>
<li>
<input type="checkbox" name="subject[]" value="Marketing Management">
<label>Marketing Management</label>
</li>
</ul>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Cultural Studies">
<label>Cultural Studies </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Communication">
<label>Communication </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Criminology& Penology">
<label>Criminology & Penology </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Demography">
<label>Demography </label>
</li>
<li class="has">
<input type="checkbox" name="subdomain[]" value="Economics">
<label>Economics <span class="total">(1)</span></label>
<ul>
<li>
<input type="checkbox" name="subject[]" value="Economics">
<label>Economics</label>
</li>
</ul>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Education& Educational Research">
<label>Education & Educational Research </label>
</li>
<li class="has">
<input type="checkbox" name="subdomain[]" value="Education, Special">
<label>Education, Special <span class="total">(1)</span></label>
<ul>
<li>
<input type="checkbox" name="subject[]" value="Adult Education">
<label>Adult Education</label>
</li>
</ul>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Ergonomics">
<label>Ergonomics </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Ethics">
<label>Ethics </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Ethnic Studies">
<label>Ethnic Studies </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Family Studies">
<label>Family Studies </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Geography">
<label>Geography </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Geography, Physical">
<label>Geography, Physical </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Gerontology">
<label>Gerontology </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="History">
<label>History </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="History& Philosophy of Science">
<label>History & Philosophy of Science </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="History of Social Sciences">
<label>History of Social Sciences </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Hospitality, Leisure, Sport& Tourism">
<label>Hospitality, Leisure, Sport & Tourism </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Industrial Relations&Labour">
<label>Industrial Relations &Labour </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Information Science& Library Science">
<label>Information Science & Library Science </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="International Relations">
<label>International Relations </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Law">
<label>Law </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Linguistics">
<label>Linguistics </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Planning& Development">
<label>Planning & Development </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Political Science">
<label>Political Science </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Psychiatry">
<label>Psychiatry </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Psychology">
<label>Psychology </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Psychology, Applied">
<label>Psychology, Applied </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Psychology, Biological">
<label>Psychology, Biological </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Psychology, Clinical">
<label>Psychology, Clinical </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Psychology, Developmental">
<label>Psychology, Developmental </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Psychology, Educational">
<label>Psychology, Educational </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Psychology, Experimental">
<label>Psychology, Experimental </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Psychology, Mathematical">
<label>Psychology, Mathematical </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Psychology, Multidisciplinary">
<label>Psychology, Multidisciplinary </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Psychology, Psychoanalysis">
<label>Psychology, Psychoanalysis </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Psychology, Social">
<label>Psychology, Social </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Public Administration">
<label>Public Administration </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Public, Environmental& Occupational Health">
<label>Public, Environmental & Occupational Health </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Rehabilitation">
<label>Rehabilitation </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Social Issues">
<label>Social Issues </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Social Sciences, Biomedical">
<label>Social Sciences, Biomedical </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Social Sciences, Interdisciplinary">
<label>Social Sciences, Interdisciplinary </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Social Sciences, Mathematical Methods">
<label>Social Sciences, Mathematical Methods </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Social Work">
<label>Social Work </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Sociology">
<label>Sociology </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Substance Abuse">
<label>Substance Abuse </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Transportation">
<label>Transportation </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Urban/Rural Studies">
<label>Urban/Rural Studies </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Women's Studies">
<label>Women's Studies </label>
</li>
</ul>
</li>
<li class="has">
<input type="checkbox" name="domain[]" value="Chemical Sciences">
<label>Chemical Sciences <span class="total">(11)</span></label>
<ul>
<li class="">
<input type="checkbox" name="subdomain[]" value="Chemistry, Applied">
<label>Chemistry, Applied </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Chemistry, Multidisciplinary">
<label>Chemistry, Multidisciplinary </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Chemistry, Analytical">
<label>Chemistry, Analytical </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Chemistry, Inorganic& Nuclear">
<label>Chemistry, Inorganic & Nuclear </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Chemistry, Organic">
<label>Chemistry, Organic </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Chemistry, Physical">
<label>Chemistry, Physical </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Chemistry,Multidisciplinary">
<label>Chemistry,Multidisciplinary </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Crystallography">
<label>Crystallography </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Electrochemistry">
<label>Electrochemistry </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Polymer Science">
<label>Polymer Science </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Spectroscopy">
<label>Spectroscopy </label>
</li>
</ul>
</li>
<li class="has">
<input type="checkbox" name="domain[]" value="Physical Sciences">
<label>Physical Sciences <span class="total">(24)</span></label>
<ul>
<li class="">
<input type="checkbox" name="subdomain[]" value="Geochemistry& Geophysics">
<label>Geochemistry & Geophysics </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Geology">
<label>Geology </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Geosciences, Multidisciplinary">
<label>Geosciences, Multidisciplinary </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Meteorology& Atmospheric Sciences">
<label>Meteorology & Atmospheric Sciences </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Mineralogy">
<label>Mineralogy </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Oceanography">
<label>Oceanography </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Paleontology">
<label>Paleontology </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Acoustics">
<label>Acoustics </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Astronomy& Astrophysics">
<label>Astronomy & Astrophysics </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Thermodynamics">
<label>Thermodynamics </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Mathematics, Applied">
<label>Mathematics, Applied </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Mathematics, Interdisciplinary Applications">
<label>Mathematics, Interdisciplinary Applications </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Mathematics">
<label>Mathematics </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Nuclear Science& Technology">
<label>Nuclear Science & Technology </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Optics">
<label>Optics </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Physics, Applied">
<label>Physics, Applied </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Physics, Fluids& Plasmas">
<label>Physics, Fluids & Plasmas </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Physics, Atomic, Molecular& Chemical">
<label>Physics, Atomic, Molecular & Chemical </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Physics, Multidisciplinary">
<label>Physics, Multidisciplinary </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Physics, Condensed Matter">
<label>Physics, Condensed Matter </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Physics, Nuclear">
<label>Physics, Nuclear </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Physics, Particles& Fields">
<label>Physics, Particles & Fields </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Physics, Mathematical">
<label>Physics, Mathematical </label>
</li>
<li class="">
<input type="checkbox" name="subdomain[]" value="Statistics& Probability">
<label>Statistics & Probability </label>
</li>
</ul>
</li>
<li class="has">
<input type="checkbox" name="domain[]" value="Engineering and Technology">
<label>Engineering and Technology <span class="total">(46)</span></label>.........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
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