javascript 多级checkbox选择效果_表单特效

今天总算把部门多选的效果整出来
见图：

先共享核心代码：
1：js脚本

复制代码 代码如下:

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;itreeHTML += degreeString;
}
treeHTML += barString;
treeHTML += "";
treeHTML += option.text+"
";
}
function dispKidsByPid(pid,degree) {
for (var i=0;iif (pid==checkList[i].parentid) {
dispCheck(checkList[i],degree);
dispKidsByPid(checkList[i].id,degree+1);
}
}
}
function checkOption(option)
{
var deptCheckList=document.getElementsByName("deptOption");
//检查父元素
if(option.parentId!=0){
var parentChecked="0";
for(var i=0;iif(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");
//检查子元素
for(var i=0;iif("dept_"+deptCheckList[i].parentId==option.id){
deptCheckList[i].checked=option.checked;
checkSubOption(deptCheckList[i]);
}
}
}

2:页面：

复制代码 代码如下:

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");
%>

"/>

角色名称：	dataType="LimitB" min="1" max="50" msg="角色名称不能为空,且长度不能大于25个中文字符" class="input_style1" value=""/>  *
角色描述：	rows="5" cols="50" require="false" datatype="Limit" msg="角色描述不大于128个中文字符" max="255">
配发短信数：	"/> 条 现在还剩条可配送
可发范围：
	系统选项 >全校教师 >全校班主任 >全校学生 >全校教辅人员 行政部门 学科分组 if(subjecGgroupList!=null&&!subjecGgroupList.isEmpty()){ for(int i=0;iMasSubjectVo masSubjectVo = (MasSubjectVo) subjecGgroupList.get(i); %> > } } %> 年级分组 if(gradeGroupList!=null&&!gradeGroupList.isEmpty()){ for(int i=0;iMasGradeVo masGradeVo = (MasGradeVo) gradeGroupList.get(i); %> > } } %> 校内分组 if(groupList!=null&&!groupList.isEmpty()){ for(int i=0;iOrgBgroupVo orgBgroupVo=(OrgBgroupVo)groupList.get(i); %> > } } %> 学生年级 if(gradeGroupList!=null&&!gradeGroupList.isEmpty()){ for(int i=0;iMasGradeVo masGradeVo = (MasGradeVo) gradeGroupList.get(i); %> > } } %>

3：css

复制代码 代码如下:

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");
}