所以我想要一个带有嵌套复选框节点选择的 TreeView ，我找到了一个很好的例子来满足我的需要here .
但是，我无法将代码复制到我自己的站点或 jsfiddle——我已经在这个 fiddle 中创建了所有需要的东西 jsfiddle.net/rkv95zax/ , 但它不能作为原始站点使用。即，嵌套选择不存在。我缺少什么？谢谢。
更新:好的。我已经想通了，在http://jsfiddle.net/rkv95zax/1/ .完整代码如下。
现在有人可以告诉我如何遍历这个树节点并只显示选定的叶节点吗？
CSS:
/*
* Imageless CSS3 Treeview with Checkbox Support
* @namespace window.AcidJs
* @class CSS3Treeview
* @version 3.0
* @author Martin Ivanov
* @url developer website: http://wemakesites.net/
* @url developer twitter: https://twitter.com/#!/wemakesitesnet
* @url developer blog http://acidmartin.wordpress.com/
**/
/*
* Do you like this solution? Please, donate:
* https://www.paypal.com/cgi-bin/webscr?cmd=_s-xclick&hosted_button_id=QFUHPWJB2JDBS
**/
.acidjs-css3-treeview,
.acidjs-css3-treeview *
{
padding: 0;
margin: 0;
list-style: none;
}
.acidjs-css3-treeview label[for]::before,
.acidjs-css3-treeview label span::before
{
content: "\25b6";
display: inline-block;
margin: 2px 0 0;
width: 13px;
height: 13px;
vertical-align: top;
text-align: center;
color: #e74c3c;
font-size: 8px;
line-height: 13px;
}
.acidjs-css3-treeview li ul
{
margin: 0 0 0 22px;
}
.acidjs-css3-treeview *
{
vertical-align: middle;
}
.acidjs-css3-treeview
{
font: normal 11px/16px "Segoe UI", Arial, Sans-serif;
}
.acidjs-css3-treeview li
{
-webkit-user-select: none;
-moz-user-select: none;
user-select: none;
}
.acidjs-css3-treeview input[type="checkbox"]
{
display: none;
}
.acidjs-css3-treeview label
{
cursor: pointer;
}
.acidjs-css3-treeview label[for]::before
{
-webkit-transform: translatex(-24px);
-moz-transform: translatex(-24px);
-ms-transform: translatex(-24px);
-o-transform: translatex(-24px);
transform: translatex(-24px);
}
.acidjs-css3-treeview label span::before
{
-webkit-transform: translatex(16px);
-moz-transform: translatex(16px);
-ms-transform: translatex(16px);
-o-transform: translatex(16px);
transform: translatex(16px);
}
.acidjs-css3-treeview input[type="checkbox"][id]:checked ~ label[for]::before
{
content: "\25bc";
}
.acidjs-css3-treeview input[type="checkbox"][id]:not(:checked) ~ ul
{
display: none;
}
.acidjs-css3-treeview label:not([for])
{
margin: 0 8px 0 0;
}
.acidjs-css3-treeview label span::before
{
content: "";
border: solid 1px #1375b3;
color: #1375b3;
opacity: .50;
}
.acidjs-css3-treeview label input:checked + span::before
{
content: "\2714";
box-shadow: 0 0 2px rgba(0, 0, 0, .25) inset;
opacity: 1;
}
HTML:
<h3>Demo</h3>
<p>Another version of the treeview without checkbox support is available on
<a href="css3-treeview.html" target="_blank">this page</a>.</p>
<div class="acidjs-css3-treeview">
<ul>
<li>
<input type="checkbox" id="node-0" checked="checked" /><label><input type="checkbox" /><span></span></label><label for="node-0">Libraries</label>
<ul>
<li>
<input type="checkbox" id="node-0-0" checked="checked" /><label><input type="checkbox" /><span></span></label><label for="node-0-0">Documents</label>
<ul>
<li>
<input type="checkbox" id="node-0-0-0" checked="checked" /><label><input type="checkbox" /><span></span></label><label for="node-0-0-0">My Documents</label>
<ul>
<li>
<input type="checkbox" id="node-0-0-0-0" /><label><input type="checkbox" /><span></span></label><label for="node-0-0-0-0">Downloads</label>
</li>
<li>
<input type="checkbox" id="node-0-0-0-1" /><label><input type="checkbox" /><span></span></label><label for="node-0-0-0-1">Projects</label>
</li>
</ul>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="node-0-1" /><label><input type="checkbox" /><span></span></label><label for="node-0-1">Music</label>
<ul>
<li>
<input type="checkbox" id="node-0-1-0" /><label><input type="checkbox" /><span></span></label><label for="node-0-1-0">My Music</label>
</li>
<li>
<input type="checkbox" id="node-0-1-1" /><label><input type="checkbox" /><span></span></label><label for="node-0-1-1">Public Music</label>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="node-0-2" /><label><input type="checkbox" /><span></span></label><label for="node-0-2">Pictures</label>
<ul>
<li>
<input type="checkbox" id="node-0-2-0" /><label><input type="checkbox" /><span></span></label><label for="node-0-2-0">My Pictures</label>
</li>
<li>
<input type="checkbox" id="node-0-2-1" /><label><input type="checkbox" /><span></span></label><label for="node-0-2-1">Public Pictures</label>
</li>
</ul>
</li>
<li>
<input type="checkbox" id="node-0-3" checked="checked" /><label><input type="checkbox" checked="checked" /><span></span></label><label for="node-0-3">Video</label>
<ul>
<li>
<input type="checkbox" id="node-0-3-0" /><label><input type="checkbox" checked="checked" /><span></span></label><label for="node-0-3-0">My Videos</label>
</li>
<li>
<input type="checkbox" id="node-0-3-1" /><label><input type="checkbox" checked="checked" /><span></span></label><label for="node-0-3-1">Public Videos</label>
</li>
</ul>
</li>
</ul>
</li>
</ul>
</div>
<p> </p>
Javascript:
$(".acidjs-css3-treeview").delegate("label input:checkbox", "change", function() {
var
checkbox = $(this),
nestedList = checkbox.parent().next().next(),
selectNestedListCheckbox = nestedList.find("label:not([for]) input:checkbox");
if(checkbox.is(":checked")) {
return selectNestedListCheckbox.prop("checked", true);
}
selectNestedListCheckbox.prop("checked", false);
});
最佳答案
啊，该站点从未提及 jquery，关键字“jquery”也没有出现在其 html 源代码中。
现在可以了:
jsfiddle.net/rkv95zax/1/
更新:我不知道是否可以遍历上面的树节点，但我发现了这个:
多复选框选择/取消选择 - 演示
http://jsfiddle.net/jLx5z99q/
关于javascript - 具有嵌套复选框节点选择的 Treeview，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30034938/