<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>无标题文档</title>
<style type="text/css">
ul,li{
list-style-type:none;
}
.divclass{
border:red 1px solid;
width:15em;
height:auto;
}
a{
text-decoration:none;
}
</style>
</head>
<body>
<form>
<div id="divid"></div>
</form>
</body>
<script type="text/javascript">
window.tree();
var licheck = document.forms[0].licheck;//得到子菜单
var check = document.forms[0].ddd;//得到父菜单
//动态加载属性菜单
function tree(){
var divtag = document.getElementById("divid");
var lilist ="";
for(var i=0;i<5;i++){
lilist+="<li ><input type='checkbox' οnclick='licheckclick()' name='licheck'/>一级菜单"+i+"</li>";
}
var li="<li><input type='checkbox' value='inputname' name='ddd' οnclick='checkbocclick()'/><a href='javascript:void(0)' οnclick='liclick()'>我是一级菜单</a></li><ul>"+lilist+"</ul>";
var ul="<ul>"+li+"</ul>";
divtag.innerHTML=ul;
divtag.className="divclass";
}
//父节点的点击事件
var state=true;
function liclick(){
var divtag = document.getElementById("divid");
if(state){
var first = divtag.firstChild.lastChild.style.display="none";
state=false;
}else{
var first = divtag.firstChild.lastChild.style.display="block";
state=true;
}
}
//父节点的多选框
function checkbocclick(){
if(check.checked){
allanainvoes(licheck,true);
return;
}else{
allanainvoes(licheck,false);
return;
}
function allanainvoes(array,state){
for(var i=0;i<array.length;i++){
licheck[i].checked=state;
}
}
}
//子节点的多选框
function licheckclick(){
var num=0;
for(var i=0;i<licheck.length;i++){
if(licheck[i].checked){
check.checked=true;
return;
}else{
if(licheck[i].checked==false){
num++;
if(num==licheck.length){
check.checked=false;
}
}
}
}
}
</script>
</html>