JavaScript Multilevel checkbox Selection effect _ form effects

Today, I've got a lot of choices for the department.
See figure:

Share the core code first:
1:js Script

Copy Code code as follows:

var treehtml = "";
var checklist = new Array (); /*only Init here*/
var barstring = "└";/*┝└*/
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 + = "<input type= ' checkbox ' name= ' deptoption ' onclick= '" checkoption "(this); Checksuboption (this) ' id= '-dept_ ' +option.value+ "' value= '" +option.value+ "' parentid= '" +option.parentid+ "" "+ option.ischeck+" > ";
treehtml + + option.text+ "</input><br/>";
}
function Dispkidsbypid (pid,degree) {
for (Var i=0;i<checklist.length;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 parent Element
if (option.parentid!=0) {
var parentchecked= "0";
for (Var i=0;i<deptchecklist.length;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 child elements
for (Var i=0;i<deptchecklist.length;i++) {
if ("Dept_" +deptchecklist[i].parentid==option.id) {
deptchecklist[i].checked=option.checked;
Checksuboption (Deptchecklist[i]);
}
}
}

2: page:

Copy Code code as follows:

<%@ page contenttype= "TEXT/HTML;CHARSET=GBK"%>
<%@ page import= "java.util.*"%>
<%@ page import= "Com.gzdec.eecn.web.school.vo.SchoolRoleVo"%>
<%@ page import= "Com.gzdec.common.web.base.BaseAction"%>
<%@ page import= "Com.gzdec.common.util.CodeFilter"%>
<%@ page import= "Com.gzdec.eecn.web.mas.vo.MasGradeVo"%>
<%@ page import= "Com.gzdec.eecn.web.mas.vo.MasSubjectVo"%>
<%@ page import= "com.gzdec.edubase.web.organization.vo.*"%>
<%@ page import= "Com.gzdec.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");
%>
<script type= "Text/javascript" >
<%
if (deptlist!=null) {
Orgdepartmentvo orgdepartmentvo=new Orgdepartmentvo ();
String checklist = "";
String ischeck= "";
for (int i=0;i<deptlist.size (); i++) {
Ischeck= "";
Orgdepartmentvo = (orgdepartmentvo) deptlist.get (i);
if (schoolroleprismsvo!=null&&schoolroleprismsvo.getrangedept ()!=null&& Schoolroleprismsvo.getrangedept (). IndexOf (Orgdepartmentvo.getdeptid (). toString () + ",") >-1)
ischeck= "Checked";
Checklist + = "checklist[" +i+ "]=new maketree (" +orgdepartmentvo.getdeptid () +
", '" +orgdepartmentvo.getdeptname () + "'," +orgdepartmentvo.getdeptid () + "," +orgdepartmentvo.getparentdept () + ", '" + ischeck+ "');";
}
Out.print (checklist);
}
%>
Dispkidsbypid (0,0);
function Showrolerang () {
$ (' #roleRang '). Show ();
}
function Hiderolerang () {
$ (' #roleRang '). Hide (1000);
}
function Showdiv (divid) {
$ ('. Rolerangoption '). Each (function (i) {
if (This.id==divid)
document.getElementById (this.id). style.display= "";
Else
document.getElementById (this.id). style.display= "None";
});
};
</script>
<form id= "MyForm" name= "MyForm" action= "/school/schoolrolemgr.ee?action=updateschoolrole" method= "POST" >
<input type= "hidden" name= "Roleid" value= "<%=schoolrolevo ==null" "": Schoolrolevo.getroleid ()%> "/>"
<table align= "center" >
<tr>
&LT;TD align= "Right" > Role name:</td>
<td>
<input type= "text" name= "rolename" <%= "0". Equals (Roletype)? ReadOnly ":" "%> datatype=" LIMITB "min=" 1 "max=" "msg=" role name cannot be empty and can not be longer than 25 Chinese characters "class=" Input_style1 "value=" <% =schoolrolevo!=null? Codefilter.tohtml (Schoolrolevo.getrolename ()!=null?schoolrolevo.getrolename (): "" "" "" "%>"/> <span style= " Font-color:red ">*</span>
</td>
</tr>
<tr>
&LT;TD align= "Right" > Role Description:</td>
<td>
<textarea name= "Roledesc" <%= "0". Equals (Roletype)? ReadOnly ":" "%> rows=" 5 "cols=" require= "false" Datatype= "Limit" msg= "The role description is not greater than 128 Chinese characters" max= "255" ><%= Schoolrolevo!=null? Codefilter.tohtml (Schoolrolevo.getroledesc ()!=null?schoolrolevo.getroledesc (): ""): ""%></textarea>
</td>
</tr>
<tr>
&LT;TD align= "Right" > allotted SMS Number:</td>
<td>
<input type= "text" name= "Totalnum" require= "false" datatype= "number" msg= "Allot SMS numbers must be number" class= "Input_style1" value= " <%=schoolroleprismsvo!=null&&schoolroleprismsvo.getsmstotalnum ()!=null? Schoolroleprismsvo.getsmstotalnum (). toString (): "%>"/>
Now there's <%=schoolroleprismsvo!=null&&schoolroleprismsvo.getsmstotalnum ()!=null? Schoolroleprismsvo.getsmstotalnum (). Longvalue ()-schoolroleprismsvo.getsmssendnum (). LongValue (): "0"%> strip can be distributed
</td>
</tr>
<tr>
&LT;TD align= "Right" > can be issued range:</td>
<td>
<input type= "button" value= "select" onclick= "Showrolerang ()"/>
<input type= "button" value= "OK" onclick= "Hiderolerang ()"/>
</td>
</tr>
<tr>
&LT;TD align= "right" ></td>
<td>
<div id= "Rolerang" style= "Display:none" >
<div class= "Basic" id= "LIST1A" >
<a onclick= "Showdiv (' Div1 ')" > System options </a>
<div style= "Display:none" id= "Div1" class= "Rolerangoption" >
<p>
<input type= "checkbox" Name= "SysOption" value= "JS" <%=schoolRolePrismsVo!=null&& Schoolroleprismsvo.getrangesystem ()!=null&&schoolroleprismsvo.getrangesystem (). IndexOf ("JS,")!=-1? " Checked ":" "%>> teachers <br/>
<input type= "checkbox" Name= "SysOption" value= "BZR" <%=schoolRolePrismsVo!=null&& Schoolroleprismsvo.getrangesystem ()!=null&&schoolroleprismsvo.getrangesystem (). IndexOf ("BZR,")!=-1? " Checked ":" "%>> School head teacher <br/>
<input type= "checkbox" Name= "SysOption" value= "XS" <%=schoolRolePrismsVo!=null&& Schoolroleprismsvo.getrangesystem ()!=null&&schoolroleprismsvo.getrangesystem (). IndexOf ("XS,")!=-1? " Checked ":" "%>> students <br/>
<input type= "checkbox" Name= "SysOption" value= "Jfry" <%=schoolRolePrismsVo!=null&& Schoolroleprismsvo.getrangesystem ()!=null&&schoolroleprismsvo.getrangesystem (). IndexOf ("JFRY,")!=-1? " Checked ":" "%>> School assistant staff <br/>
</p>
</div>
<a onclick= "Showdiv (' Div2 ')" > Administrative Department </a>
<div style= "Display:none" id= "Div2" class= "Rolerangoption" >
<p id= "Deptinfo" style= "Height:100px;overflow:scroll" >
</p>
</div>
<a onclick= "Showdiv (' Div3 ')" > Discipline Group </a>
<div style= "Display:none" id= "Div3" class= "Rolerangoption" >
<p style= "Height:100px;overflow:scroll" >
<%
if (Subjecggrouplist!=null&&!subjecggrouplist.isempty ()) {
for (int i=0;i<subjecggrouplist.size (); i++) {
Massubjectvo Massubjectvo = (massubjectvo) subjecggrouplist.get (i);
%>
<input type= "checkbox" Name= "Subjectoption" value= "<%=massubjectvo.getsubjectid ()%>" <%= Schoolroleprismsvo!=null&&schoolroleprismsvo.getrangesubject ()!=null&& Schoolroleprismsvo.getrangesubject (). IndexOf (Massubjectvo.getsubjectid (). toString () + ",")!=-1? " Checked ":" "%>><%=massubjectvo.getname ()%><br/>
<%
}
}
%>
</p>
</div>
<a onclick= "Showdiv (' div4 ')" > Grade Group </a>
<div style= "Display:none" id= "Div4" class= "Rolerangoption" >
<p>
<%
if (Gradegrouplist!=null&&!gradegrouplist.isempty ()) {
for (int i=0;i<gradegrouplist.size (); i++) {
Masgradevo Masgradevo = (Masgradevo) gradegrouplist.get (i);
%>
<input type= "checkbox" Name= "Gradeoption" value= "<%=masgradevo.getgradecode ()%>" <%=schoolroleprismsvo !=null&&schoolroleprismsvo.getrangegrade ()!=null&&schoolroleprismsvo.getrangegrade (). IndexOf ( Masgradevo.getgradecode (). toString () + ",")!=-1? Checked ":" "%>><%=masgradevo.getname ()%><br/>
<%
}
}
%>
</p>
</div>
<a onclick= "Showdiv (' div5 ')" > in-school group </a>
<div style= "Display:none" id= "div5" class= "Rolerangoption" >
<p style= "height:100px" >
<%
if (Grouplist!=null&&!grouplist.isempty ()) {
for (int i=0;i<grouplist.size (); i++) {
ORGBGROUPVO orgbgroupvo= (ORGBGROUPVO) grouplist.get (i);
%>
<input type= "checkbox" Name= "Groupoption" value= "<%=orgbgroupvo.getbid ()%>" <%=schoolroleprismsvo!= Null&&schoolroleprismsvo.getrangeinterest ()!=null&&schoolroleprismsvo.getrangeinterest (). IndexOf (Orgbgroupvo.getbid (). toString () + ",")!=-1? Checked ":" "%>><%=orgbgroupvo.getbname ()%><br/>
<%
}
}
%>
</p>
</div>
<a onclick= "Showdiv (' Div6 ')" > Student grade </a>
<div style= "Display:none" id= "Div6" class= "Rolerangoption" >
<p>
<%
if (Gradegrouplist!=null&&!gradegrouplist.isempty ()) {
for (int i=0;i<gradegrouplist.size (); i++) {
Masgradevo Masgradevo = (Masgradevo) gradegrouplist.get (i);
%>
<input type= "checkbox" Name= "Studentoption" value= "<%=masgradevo.getgradecode ()%>" <%= Schoolroleprismsvo!=null&&schoolroleprismsvo.getrangestugrade ()!=null&& Schoolroleprismsvo.getrangestugrade (). IndexOf (Masgradevo.getgradecode (). toString () + ",")!=-1? " Checked ":" "%>><%=masgradevo.getname ()%><br/>
<%
}
}
%>
</p>
</div>
</div>
</td>
</tr>
<tr>
&LT;TD align= "right" > </td>
&LT;TD valign= "Top" ><span style= "Display:none" id= "message" ></span></td>
</tr>
</table>
</form>

3:css

Copy Code code as follows:

Li {list-style-type:none;}
. basic {width:20em;}
. Basic {
width:260px;
Font-family:verdana;
BORDER:1PX solid black;
}
. Basic DIV {
Background-color: #eee;
}
. Basic P {
margin-bottom:10px;
Border:none;
Text-decoration:none;
Font-weight:bold;
font-size:10px;
margin:0px;
padding:10px;
}
. Basic a {
Cursor:pointer;
Display:block;
padding:5px;
margin-top:0;
Text-decoration:none;
Font-weight:bold;
font-size:12px;
Color:black;
Background-color: #00a0c6;
border-top:1px solid #FFFFFF;
border-bottom:1px solid #999;
Background-image:url ("Accordiontab0.gif");
}
. basic A:hover {
Background-color:white;
Background-image:url ("Accordiontab2.gif");
}
. Basic A.selected {
Color:black;
Background-color: #80cfe2;
Background-image:url ("Accordiontab2.gif");
}