javascript 多级checkbox选择效果


Posted in Javascript onAugust 20, 2009

今天总算把部门多选的效果整出来
见图:
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;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"); 
//检查父元素 
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"); 
//检查子元素 
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 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> 
<td align="right">角色名称:</td> 
<td> 
<input type="text" name="roleName" <%="0".equals(roleType)?"readonly":"" %> dataType="LimitB" min="1" max="50" msg="角色名称不能为空,且长度不能大于25个中文字符" class="input_style1" value="<%=schoolRoleVo!=null?CodeFilter.toHtml(schoolRoleVo.getRoleName()!=null?schoolRoleVo.getRoleName():""):""%>"/>  <span style="font-color:red">*</span> 
</td> 
</tr> 
<tr> 
<td align="right">角色描述:</td> 
<td> 
<textarea name="roleDesc" <%="0".equals(roleType)?"readonly":"" %> rows="5" cols="50" require="false" datatype="Limit" msg="角色描述不大于128个中文字符" max="255"><%=schoolRoleVo!=null?CodeFilter.toHtml(schoolRoleVo.getRoleDesc()!=null?schoolRoleVo.getRoleDesc():""):""%></textarea> 
</td> 
</tr> 
<tr> 
<td align="right">配发短信数:</td> 
<td> 
<input type="text" name="totalNum" require="false" datatype="Number" msg="配发短信数必须为数字" class="input_style1" value="<%=schoolRolePrismsVo!=null&&schoolRolePrismsVo.getSmsTotalNum()!=null?schoolRolePrismsVo.getSmsTotalNum().toString():""%>"/> 
条 现在还剩<%=schoolRolePrismsVo!=null&&schoolRolePrismsVo.getSmsTotalNum()!=null?schoolRolePrismsVo.getSmsTotalNum().longValue()-schoolRolePrismsVo.getSmsSendNum().longValue():"0"%>条可配送 
</td> 
</tr> 
<tr> 
<td align="right">可发范围:</td> 
<td> 
<input type="button" value="选择" onclick="showRoleRang()"/> 
<input type="button" value="确定" onclick="hideRoleRang()"/> 
</td> 
</tr> 
<tr> 
<td align="right"></td> 
<td> 
<div id="roleRang" style="display:none"> 
<div class="basic" id="list1a"> 
<a onclick="showDiv('div1')">系统选项</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":"" %>>全校教师<br/> 
<input type="checkbox" name="sysOption" value="BZR" <%=schoolRolePrismsVo!=null&&schoolRolePrismsVo.getRangeSystem()!=null&&schoolRolePrismsVo.getRangeSystem().indexOf("BZR,")!=-1?"checked":"" %>>全校班主任<br/> 
<input type="checkbox" name="sysOption" value="XS" <%=schoolRolePrismsVo!=null&&schoolRolePrismsVo.getRangeSystem()!=null&&schoolRolePrismsVo.getRangeSystem().indexOf("XS,")!=-1?"checked":"" %>>全校学生<br/> 
<input type="checkbox" name="sysOption" value="JFRY" <%=schoolRolePrismsVo!=null&&schoolRolePrismsVo.getRangeSystem()!=null&&schoolRolePrismsVo.getRangeSystem().indexOf("JFRY,")!=-1?"checked":"" %>>全校教辅人员<br/> 
</p> 
</div> 
<a onclick="showDiv('div2')">行政部门</a> 
<div style="display:none" id="div2" class="roleRangOption"> 
<p id="deptInfo" style="height:100px;overflow :scroll"> 
</p> 
</div> 
<a onclick="showDiv('div3')">学科分组</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')">年级分组</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')">校内分组</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')">学生年级</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> 
<td align="right"> </td> 
<td valign="top"><span style="display:none" id="message"></span></td> 
</tr> 
</table> 
</form>

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"); 
}
Javascript 相关文章推荐
js中根据字数截取字符串,不能截断url
Jan 12 Javascript
javascript parseInt() 函数的进制转换注意细节
Jan 08 Javascript
Jquery UI震动效果实现原理及步骤
Feb 04 Javascript
设置jsf的选择框h:selectOneMenu为不可编辑状态的方法
Jan 07 Javascript
调用DOM对象的focus使文本框获得焦点
Feb 19 Javascript
超级简单的jquery操作表格方法
Dec 15 Javascript
JavaScript中操作字符串之localeCompare()方法的使用
Jun 06 Javascript
JS简单去除数组中重复项的方法
Sep 13 Javascript
jquery实现自适应banner焦点图
Feb 16 Javascript
vue实现父子组件之间的通信以及兄弟组件的通信功能示例
Jan 29 Javascript
简单说说如何使用vue-router插件的方法
Apr 08 Javascript
使用vue脚手架(vue-cli)搭建一个项目详解
May 09 Javascript
调用js时ie6和ie7,ff的区别
Aug 19 #Javascript
jquery 入门教程 [翻译] 推荐
Aug 17 #Javascript
jQuery select控制插件
Aug 17 #Javascript
javascript 无提示关闭窗口脚本
Aug 17 #Javascript
javascript addBookmark 加入收藏 多浏览器兼容
Aug 15 #Javascript
用JavaScript将从数据库中读取出来的日期型格式化为想要的类型。
Aug 15 #Javascript
javascript 客户端验证上传图片的大小(兼容IE和火狐)
Aug 15 #Javascript
You might like
新浪微博OAuth认证和储存的主要过程详解
2015/03/27 PHP
PHP实现权限管理功能示例
2017/09/22 PHP
Yii框架常见缓存应用实例小结
2019/09/09 PHP
javascript中有趣的反柯里化深入分析
2012/12/05 Javascript
原生的html元素选择器类似jquery选择器
2014/10/15 Javascript
Shell脚本实现Linux系统和进程资源监控
2015/03/05 Javascript
js点击文本框弹出可选择的checkbox复选框
2016/02/03 Javascript
深入理解JS中的substr和substring
2016/04/26 Javascript
Javascript iframe交互并兼容各种浏览器的解决方法
2016/07/12 Javascript
JQuery获取鼠标进入和离开容器的方向
2016/12/29 Javascript
js实现文字向上轮播功能
2017/01/13 Javascript
Vue结合SignalR实现前后端实时消息同步
2017/09/19 Javascript
关于react中组件通信的几种方式详解
2017/12/10 Javascript
微信小程序实现多选功能
2018/11/04 Javascript
js实现页面图片消除效果
2020/03/24 Javascript
Python减少循环层次和缩进的技巧分析
2016/03/15 Python
Python+OpenCV感兴趣区域ROI提取方法
2019/01/10 Python
PyQt+socket实现远程操作服务器的方法示例
2019/08/22 Python
python线程join方法原理解析
2020/02/11 Python
python GUI库图形界面开发之PyQt5信号与槽事件处理机制详细介绍与实例解析
2020/03/08 Python
python:删除离群值操作(每一行为一类数据)
2020/06/08 Python
Python Django中间件使用原理及流程分析
2020/06/13 Python
CSS3 伪类选择器 nth-child()说明
2010/07/10 HTML / CSS
有影响力的品牌之家:Our Social Collective
2019/06/08 全球购物
世界汽车零件:World Car Parts
2019/09/04 全球购物
英国豪华装饰照明品牌的在线零售商:Inspyer Lighting
2019/12/10 全球购物
大唐面试试题(CPU,UNIX等等)
2012/01/11 面试题
《李时珍夜宿古寺》教学反思
2014/04/09 职场文书
2014年高中班主任工作总结
2014/11/08 职场文书
地方课程教学计划
2015/01/19 职场文书
会计岗位职责
2015/02/03 职场文书
保险公司客户经理岗位职责
2015/04/09 职场文书
2015年教师学期工作总结
2015/04/30 职场文书
2015年销售助理工作总结
2015/05/11 职场文书
十个Python自动化常用操作,即拿即用
2021/05/10 Python
nginx中封禁ip和允许内网ip访问的实现示例
2022/03/17 Servers