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 相关文章推荐
强悍无比的WEB开发好助手FireBug(Firefox Plugin)
Jan 16 Javascript
一个JQuery操作Table的代码分享
Mar 30 Javascript
原生js实现查找/添加/删除/指定元素的class
Apr 12 Javascript
Jquery创建一个层当鼠标移动到层上面不消失效果
Dec 12 Javascript
jQuery动态改变图片显示大小(修改版)的实现思路及代码
Dec 24 Javascript
JavaScript实现打字效果的方法
Jul 10 Javascript
jquery UI Datepicker时间控件的使用方法(终结版)
Nov 07 Javascript
Bootstrap 设置datetimepicker在屏幕上面弹出设置方法
Mar 21 Javascript
js实现1,2,3,5数字按照概率生成
Sep 12 Javascript
webpack-dev-server远程访问配置方法
Feb 22 Javascript
微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能
Jan 22 Javascript
解决antd 下拉框 input [defaultValue] 的值的问题
Oct 31 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
TP5(thinkPHP5框架)实现显示错误信息及行号功能的方法
2019/06/03 PHP
PHP的图像处理实例小结【文字水印、图片水印、压缩图像等】
2019/12/20 PHP
元素的内联事件处理函数的特殊作用域在各浏览器中存在差异
2011/01/12 Javascript
基于jquery的时间段实现代码
2012/08/02 Javascript
jquery遍历筛选数组的几种方法和遍历解析json对象
2013/12/13 Javascript
制作jquery遮罩层效果导航菜单代码分享
2013/12/25 Javascript
用console.table()调试javascript
2014/09/04 Javascript
返回顶部按钮响应滚动且动态显示与隐藏
2014/10/14 Javascript
JavaScript中继承用法实例分析
2015/05/16 Javascript
JavaScript setTimeout使用闭包功能实现定时打印数值
2015/12/18 Javascript
利用js编写响应式侧边栏
2016/09/17 Javascript
jQuery css() 方法动态修改CSS属性
2016/09/25 Javascript
JS焦点图,JS 多个页面放多个焦点图的实例
2016/12/08 Javascript
Bootstrap整体框架之CSS12栅格系统
2016/12/15 Javascript
详解百度百科目录导航树小插件
2017/01/08 Javascript
Vuex模块化实现待办事项的状态管理
2017/03/15 Javascript
jQuery实现炫丽的3d旋转星空效果
2018/07/04 jQuery
vue.js template模板的使用(仿饿了么布局)
2018/08/13 Javascript
详解vuex之store源码简单解析
2019/06/13 Javascript
JavaScript编写开发动态时钟
2020/07/29 Javascript
[01:05:32]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#1COL VS Alliance第一局
2016/03/04 DOTA
[01:03:13]VG vs Pain 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
Python选择网卡发包及接收数据包
2019/04/04 Python
Python用字典构建多级菜单功能
2019/07/11 Python
Django 全局的static和templates的使用详解
2019/07/19 Python
python代码打印100-999之间的回文数示例
2019/11/24 Python
详解Python的三种拷贝方式
2020/02/11 Python
Python 发送邮件方法总结
2020/08/10 Python
马来西亚银饰品牌:JEOEL
2017/12/15 全球购物
毕业生医学检验求职信
2013/10/16 职场文书
运动会广播稿200字
2014/01/15 职场文书
《放小鸟》教学反思
2014/04/20 职场文书
投标承诺书怎么写
2014/05/24 职场文书
初中教师个人工作总结
2015/02/10 职场文书
JavaScript文档对象模型DOM
2021/11/20 Javascript
Java代码规范与质量检测插件SonarLint的使用
2022/08/05 Java/Android