<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<script src="jquery1.8.3.min.js"></script>
<style>
*{list-style:none;padding:0px;margin:0px;}
.plus{padding-left:35px;background:url(z-plus.jpg)no-repeat top left;}
.minus{padding-left:35px;background:url(z-sub.jpg)no-repeat top left;}
.end{padding-left:50px;background:url(z-end.gif)no-repeat left center;}
</style>
<script>
$(document).ready(function(){
$("#tree li:not(':has(ul)')").addClass('end');//not留下不匹配的。说的是即使li,又不符合has(ul)这个规则 即是li又不包含ul的留下
$("#tree li:has(ul)").addClass('plus');//即是li又包含ul的留下
$("#tree ul").hide();//hide隐藏 1000ms 1000ms隐藏 hide()
$("span").click(function(e){//event=window.event
var cc=e.target;//获取事件源
var cctype=cc.type;//e是jquery事件对象 有自己的属性 target属性：事件源
if(cctype=='checkbox'){
if($(cc).prop("checked")){//判断事件源是是选中状态
$(cc).parent().parent().find(":checkbox").prop("checked",true);
//通过checkbox找到span 找到 li 找到ul prev找到上一个span，操作span中checkbox被选中
findFather(cc);
}else{
$(cc).parent().parent().find(":checkbox").prop("checked",false)
unCheckedFather(cc);
}
}else{
var li=$(this).parent();
if(li.hasClass('minus')){//hasClass 含有-
$(this).next().hide();//show显示 $(this)是span .parent() li
$(this).parent().removeClass('minus').addClass('plus')//先找到li、 移除- 添加+
}else{
$(this).next().show();//show显示 $(this)是span .parent() li
$(this).parent().removeClass('plus').addClass('minus')//先找到li、 移除+ 添加-
}
}
});
});
/*递归：算法。自己调用自己 setTimeout*/
function findFather(obj){
if($(obj).parent().parent().parent().attr("id")!='tree'){
var father=$(obj).parent().parent().parent().prev().find(":checkbox");
father.prop("checked",true);
findFather(father)
}
}
function unCheckedFather(obj){
if($(obj).parent().parent().parent().attr("id")!='tree'){
var sibChecked=$(obj).parent().parent().siblings().has(":checked") ;
var father=$(obj).parent().parent().parent().prev().find(":checkbox");
if(sibChecked.size()==0){
father.prop("checked",false);
unCheckedFather(father);
}
}
}
</script>
</HEAD>
<BODY>
<ul id="tree">
<li>
<span><input type="checkbox"/>节点1</span>
<ul>
<li>
<span><input type="checkbox"/>节点11</span>
<ul>
<li><span><input type="checkbox"/>节点111</span></li>
<li><span><input type="checkbox"/>节点111</span></li>
<li><span><input type="checkbox"/>节点111</span></li>
<li><span><input type="checkbox"/>节点111</span></li>
</ul>
</li>
<li>
<span><input type="checkbox"/>节点11</span>
<ul>
<li><span><input type="checkbox"/>节点111</span></li>
<li><span><input type="checkbox"/>节点111</span></li>
<li><span><input type="checkbox"/>节点111</span></li>
<li><span><input type="checkbox"/>节点111</span></li>
</ul>
</li>
<li>
<span><input type="checkbox"/>节点11</span>
<ul>
<li><span><input type="checkbox"/>节点111</span></li>
<li><span><input type="checkbox"/>节点111</span></li>
<li><span><input type="checkbox"/>节点111</span></li>
<li><span><input type="checkbox"/>节点111</span></li>
</ul>
</li>
</ul>
</li>
<li>
<span><input type="checkbox"/>节点1</span>
<ul>
<li>
<span><input type="checkbox"/>节点11</span>
<ul>
<li><span><input type="checkbox"/>节点111</span></li>
<li><span><input type="checkbox"/>节点111</span></li>
<li><span><input type="checkbox"/>节点111</span></li>
<li><span><input type="checkbox"/>节点111</span></li>
</ul>
</li>
<li>
<span><input type="checkbox"/>节点11</span>
<ul>
<li><span><input type="checkbox"/>节点111</span></li>
<li><span><input type="checkbox"/>节点111</span></li>
<li><span><input type="checkbox"/>节点111</span></li>
<li><span><input type="checkbox"/>节点111</span></li>
</ul>
</li>
<li>
<span><input type="checkbox"/>节点11</span>
<ul>
<li><span><input type="checkbox"/>节点111</span></li>
<li><span><input type="checkbox"/>节点111</span></li>
<li><span><input type="checkbox"/>节点111</span></li>
<li><span><input type="checkbox"/>节点111</span></li>
</ul>
</li>
</ul>
</li>
<li>
<span><input type="checkbox"/>节点1</span>
<ul>
<li>
<span><input type="checkbox"/>节点11</span>
<ul>
<li><span><input type="checkbox"/>节点111</span></li>
<li><span><input type="checkbox"/>节点111</span></li>
<li><span><input type="checkbox"/>节点111</span></li>
<li><span><input type="checkbox"/>节点111</span></li>
</ul>
</li>
<li>
<span><input type="checkbox"/>节点11</span>
<ul>
<li><span><input type="checkbox"/>节点111</span></li>
<li><span><input type="checkbox"/>节点111</span></li>
<li><span><input type="checkbox"/>节点111</span></li>
<li><span><input type="checkbox"/>节点111</span></li>
</ul>
</li>
<li>
<span><input type="checkbox"/>节点11</span>
<ul>
<li><span><input type="checkbox"/>节点111</span></li>
<li><span><input type="checkbox"/>节点111</span></li>
<li><span><input type="checkbox"/>节点111</span></li>
<li><span><input type="checkbox"/>节点111</span></li>
</ul>
</li>
</ul>
</li>
</ul>
</BODY>
</HTML>