效果圖如下所示：
功能說明：當選中父節點時，子節點全部選中，當子節點未全部選中是，父節點處於半選狀態，當子節點全部選中是，父節點同時也跟着選中
源代碼如下所示：
<!doctype html>
<html lang="zh_cn">
<head>
<meta charset="UTF-8">
<title>Document</title>
<link rel="stylesheet" href="../jquery.treeview.css" />
<link rel="stylesheet" href="../red-treeview.css" />
<link rel="stylesheet" href="screen.css" />
<script src="../lib/jquery.js" type="text/javascript"></script>
<script src="../lib/jquery.cookie.js" type="text/javascript"></script>
<script src="../jquery.treeview.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#browser").treeview({});
$("#btn1").click(function(){
var c = $("input[name='ids']:checked");
alert(c.length);
})
$("#btn2").click(function(){
var h = $("input[name='ids']:indeterminate");
alert(h.length);
})
});
function findParent(p,checked) {
$("input[id='"+p+"']").attr("indeterminate",checked);
}
function child(e) {
var pId = e.id;
var checked = e.checked;
var p = $("#"+pId+"").attr("pId");
if(checked) {
findParent(p,checked);
var children = $("input[pId='"+pId+"']");
for(var i = 0; i < children.length; i++){
$(children[i]).attr("checked", checked);
}
var checkLevelLengh = $("input[pId='"+p+"']:checked").length;
var levelLengh = $("input[pId='"+p+"']").length;
if(checkLevelLengh == levelLengh) {
$("#"+p+"").removeAttr("indeterminate");
$("#"+p+"").attr("checked",checked);
}
}else {
var children = $("input[pId='"+pId+"']");
for(var i = 0; i < children.length; i++){
$(children[i]).attr("checked", checked);
}
var checkLevelLengh = $("input[pId='"+p+"']:checked").length;
if(checkLevelLengh == 0) {
$("#"+p+"").removeAttr("indeterminate");
$("#"+p+"").attr("checked",checked);
}else {
$("#"+p+"").attr("indeterminate",true);
}
}
}
</script>
</head>
<body>
<button id="btn1" >獲取選中數量</button>
<button id="btn2" >獲取半選中數量</button>
<div id="main">
<ul id='browser' class='filetree'>
<li><span class='folder'><input type="checkbox" name="ids" id="t3" pId="t0" value="3" οnchange="child(this)"/>產品展示</span>
<ul>
<li><span class='file'><input type="checkbox" name="ids" id='t12' pId="t3" value="12" οnchange="child(this)"/>網站建設</span></li>
<li><span class='file'><input type="checkbox" name="ids" id="t13" pId="t3" value="13" οnchange="child(this)"/>軟件開發</span></li>
<li><span class='file'><input type="checkbox" name="ids" id="t14" pId="t3" value="14" οnchange="child(this)"/>短信羣發</span></li>
<li><span class='file'><input type="checkbox" name="ids" id="t22" pId="t3" value="22" οnchange="child(this)"/>網絡推廣</span></li>
<li><span class='file'><input type="checkbox" name="ids" id="t23" pId="t3" value="23" οnchange="child(this)"/>平面設計</span></li>
<li><span class='file'><input type="checkbox" name="ids" id="t24" pId="t3" value="24" οnchange="child(this)"/>虛擬主機</span></li>
</ul>
</li>
<li><span class='folder'><input type="checkbox" name="ids" id="t4" pId="t0" value="4" οnchange="child(this)"/>招賢納士</span>
<ul>
<li><span class='file'><input type="checkbox" name="ids" id="t15" pId="t4" value="15" οnchange="child(this)"/>招聘信息</span></li>
<li><span class='file'><input type="checkbox" name="ids" id="t16" pId="t4" value="16" οnchange="child(this)"/>人才理念</span></li>
<li><span class='file'><input type="checkbox" name="ids" id="t17" pId="t4" value="17" οnchange="child(this)"/>培訓制度</span></li>
</ul>
</li>
<li><span class='folder'><input type="checkbox" name="ids" id="t5" pId="t0" value="5" οnchange="child(this)"/>營銷網絡</span>
<ul>
<li><span class='file'><input type="checkbox" name="ids" id="t18" pId="t5" value="18" οnchange="child(this)"/>網絡地圖</span></li>
<li><span class='file'><input type="checkbox" name="ids" id="t19" pId="t5" value="19" οnchange="child(this)"/>市場政策</span></li>
</ul>
</li>
<li><span class='folder'><input type="checkbox" name="ids" id="t6" pId="t0" value="6" οnchange="child(this)"/>在線留言</span>
<li><span class='folder'><input type="checkbox" name="ids" id="t7" pId="t0" value="7" οnchange="child(this)"/>聯繫方式</span>
<ul>
<li><span class='file'><input type="checkbox" name="ids" id="t20" pId="t7" value="20" οnchange="child(this)"/>聯繫方式</span></li>
<li><span class='file'><input type="checkbox" name="ids" id="t21" pId="t7" value="21" οnchange="child(this)"/>聯繫地圖</span></li>
</ul>
</li>
<li><span class='folder'><input type="checkbox" name="ids" id="t28" pId="t2" value="28" οnchange="child(this)"/>資料下載</span>
<ul>
<li><span class='file'><input type="checkbox" name="ids" id="t29" pId="t28" value="29" οnchange="child(this)"/>產品資料</span></li>
<li><span class='file'><input type="checkbox" name="ids" id="t30" pId="t28" value="30" οnchange="child(this)"/>其它資料</span></li>
</ul>
</li>
</ul>
</div>
</body>
</html>源文件下載地址：http://download.csdn.net/detail/zhangenping0234/8390415