Javascript multi-level checkbox selection effect _ form Effects

Select the multi-level checkbox effect. For more information about the effect, see the following figure. For more information, see. Today, I finally finished the multiple Department selections.
See the figure below:

First share the core code:
1: js script

The Code is as follows:

Var treeHTML = "";
Var checkList = new Array ();/* only init here */
Var barString = "Callback";/* callback */
Var degreeString = "";
Function makeTree (id, text, value, parentid, isCheck ){
This. id = id;
This. text = text;
This. value = value;
This. parentid = parentid;
This. isCheck = isCheck;
}
Function dispCheck (option, degree ){
For (var I = 1; I <= degree; I ++ ){
TreeHTML + = degreeString;
}
TreeHTML + = barString;
TreeHTML + ="";
TreeHTML + = option. text +"
";
}
Function dispKidsByPid (pid, degree ){
For (var I = 0; I If (pid = checkList [I]. parentid ){
DispCheck (checkList [I], degree );
DispKidsByPid (checkList [I]. id, degree + 1 );
}
}
}
Function checkOption (option)
{
Var deptCheckList = document. getElementsByName ("deptOption ");
// Check the parent Element
If (option. parentId! = 0 ){
Var parentChecked = "0 ";
For (var I = 0; I If (deptCheckList [I]. parentId = option. parentId ){
If (deptCheckList [I]. checked ){
ParentChecked = "1 ";
Break;
}
}
}
If (parentChecked = "1 ")
Document. getElementById ("dept _" + option. parentId). checked = true;
Else
Document. getElementById ("dept _" + option. parentId). checked = false;
CheckOption (document. getElementById ("dept _" + option. parentId ));
}
}
Function checkSubOption (option ){
Var deptCheckList = document. getElementsByName ("deptOption ");
// Check the child element
For (var I = 0; I If ("dept _" + deptCheckList [I]. parentId = option. id ){
DeptCheckList [I]. checked = option. checked;
CheckSubOption (deptCheckList [I]);
}
}
}

2: page:

The Code is as follows:

<% @ Page contentType = "text/html; charset = GBK" %>
<% @ Page import = "java. util. *" %>
<% @ Page import = "com.gz dec. eecn. web. school. vo. SchoolRoleVo" %>
<% @ Page import = "com.gz dec. common. web. base. BaseAction" %>
<% @ Page import = "com.gz dec. common. util. CodeFilter" %>
<% @ Page import = "com.gz dec. eecn. web. mas. vo. MasGradeVo" %>
<% @ Page import = "com.gz dec. eecn. web. mas. vo. MasSubjectVo" %>
<% @ Page import = "com.gz dec. edubase. web. organization. vo. *" %>
<% @ Page import = "com.gz dec. eecn. web. school. vo. SchoolRolePrismsVo" %>
<%
SchoolRoleVo schoolRoleVo = (SchoolRoleVo) request. getAttribute ("schoolRoleVo ");
List subjecGgroupList = (List) request. getAttribute ("subjecGgroupList ");
List gradeGroupList = (List) request. getAttribute ("gradeGroupList ");
List deptList = (List) request. getAttribute ("deptList ");
List groupList = (List) request. getAttribute ("groupList ");
String roleType = request. getParameter ("roleType ");
SchoolRolePrismsVo schoolRolePrismsVo = (SchoolRolePrismsVo) request. getAttribute ("schoolRolePrismsVo ");
%>