首页 / JAVASCRIPT / javascript 多级checkbox选择效果

javascript 多级checkbox选择效果

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了javascript 多级checkbox选择效果，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含9888字，纯文字阅读大概需要15分钟。

内容图文

今天总算把部门多选的效果整出来
见图：
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 多级checkbox选择效果全部内容，希望文章能够帮你解决javascript 多级checkbox选择效果所遇到的程序开发问题。如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/373082.html

来源：【匿名】

【上一篇】javascript 短路法代码精简【下一篇】javascript 怎么调用php方法

更多 ►

【javascript 多级checkbox选择效果】教程文章相关的互联网学习教程文章

原生javascript自定义input[type=checkbox]效果【代码】

上文已经讲input[type=radio]的做法发布，在我做input[input=checkbox]时候，觉得会和radio做法差不多，结果是有相似之后，但也有很大不同。不同点有1）checkbox自带冒泡和捕获事件，结果就是点击一下包裹checkbox的label会发生两次事件，也就是checkbox选中了，然后又不选中了，所以在对label绑定事件时候，需要停止冒泡2）选中chekbox需要使用chekbox自带的checked属性，设置该属性的选中和被选中状态，这个与radio一致代码如下 ...

JavaScript、jQuery获取radio、checkbox选中的值【代码】【图】

1<div >2 性别：<input type="radio" id="Radio1" name="rdoSex" value="男"/>男 3<input type="radio" id="Radio2" name="rdoSex" value="女"/>女 4<input type="button" id="btn1" value="click me"/><br/>5<input type="checkbox" name="play" id="ckb1" value="足球"/>足球 6<input type="checkbox" name="play" id="ckb2" value="篮球"/>篮球 7<input type="checkbox" name="play" id="ckb3" value="排球"/>排球 8</div>h...

javascript动态的改变checkbox的选中状态【代码】

1 <td>2 <div class="checkbox">3 <label>4 <input type="checkbox" id="id_{$vo.id}" value="{$vo.status}" {if condition="$vo.status eq ‘1‘"}checked{/if} />锁定5 </label>6 </div>7 </td>8 <script type="text/javascript">9 $("#id_{$vo.id}").click(function(){ 10var status = $(‘#id_{$vo.id}‘).val(); 11 $.get("{:url(‘admin/category/status_change‘)}", {id:"{$...

WebDatagrid-checkbox行如何用js控制其是否可用【代码】

由于js不能控制WebDatagrid的可编辑不可编辑，只能用前台控制。当checkbox行需要设置有时可选有时不可选，如何用js解决。需要先后台设置可编辑.Behaviors.EditingCore.enabled=true;然后前台设置：WebDatagrid.get_columns().get_columnFromKey("行key值")._editableCheckbox = false;进行前台设置。<Columns> <ig:UnboundCheckBoxField Key="RemoveDocument" Header-Text="Rem" Width="30px"> </ig:UnboundCheckBoxField> <ig:Bou...

js之checkbox判断常用示例【代码】

checkbox常用示例可参考:关于checkbox自动选中checkbox选中并通过ajax传数组到后台接收MP实战系列(十三)之批量修改操作(前后台异步交互)本次说的是，还是关于智能门锁开锁方式。通常情况下，开锁方式必须选择两种，或至少选择两种,否则就无法弹出对应的开锁方式列表以供勾选，这样一来。这就需要js层面的判断了，不可能全部推到服务器，这样用户少还好，用户多了，就不多说了。还是那句话，前端能搞定的，就不要后端，特别是JS判断...

CheckBoxList用JS实现单元

JS实现单选 <script type="text/javascript">　　function CheckSelect() {　//得到CheckBoxList 的ID　　　　var tb = document.getElementById("<%=cblHandleContent.ClientID%>");//循环得到CheckBoxList 的子集，并控制它的选中状态　　　　for (var i = 0; i < tb.cells.length; i++) {　　　　　　var chk = tb.cells[i].firstChild;　　　　　　if (chk != event.srcElement) {　　　　　　　　chk.c...

Knockoutjs——checkbox全选【代码】【图】

一、前言楼主大一党，是个小菜鸟。之前做的项目都是用第三方控件做的，最近开始学习用MVC、EasyUI和Knockoutjs等，可能下面有些地方写的不好，请大家多多包涵。二、内容首先我们要了解一下基本的Knockoutjs绑定，这个我就不多说了大家可以看Tom大叔和Y-Z-F博客。我是新建了一个table，主要内容有如下： <table align="center"><thead><tr><th width="3%"></th><th width="20%">新闻名称</th><th width="20%">作者</th></tr></thead...

jquery遍历checkbox介绍_jquery

checkbox 全选全部取消$("#ChkAll").click(function(){ $("#divContent input[type='checkbox']").attr("checked",$(this).attr("checked"));}); 获取选中的checkbox的value值:var arrChk=$("input[name=chk_list][checked]"); $(arrChk).each(function(){ window.alert(this.value); }); }); $("#checkbox_id").attr("checked"); //获取一个CheckBox的状态(有没有被选中,返回true/false) ...

jquery遍历checkbox介绍

checkbox 全选\全部取消$("#ChkAll").click(function(){ $("#divContent input[type=checkbox]").attr("checked",$(this).attr("checked"));}); 获取选中的checkbox的value值:var arrChk=$("input[name=chk_list][checked]"); $(arrChk).each(function(){ window.alert(this.value); }); }); $("#checkbox_id").attr("checked"); //获取一个CheckBox的状态(有没有被选中,返回true/false) ...

javascript – reactjs checkboxlist组件 – 更新父级中的状态更改【代码】

我有一堆复选框列表要求.我会详细解释.我有一堆语言说：var languages = ["English", "German", "French", "Spanish", "Mandarin", "Tamil"]我有一个父组件,其中有一个表单,我有四个部分,说：class Page extends React.Component {render() {return (<form><h1>CanSpeak</h1> <chkboxlist someProp="speak" /><h1>CanSpeak</h1> <chkboxlist someProp="read" /><h1>CanSpeak</h1> <chkboxlist someProp="write" /><h1>CanSpeak</h1...

Jquery遍历checkbox获取选中项value值的方法

源码：代码如下:jQuery(function($){ $("input[name=key]:checkbox").click(function(){ var ids = ; var flag = 0; $("#ids").attr("value",ids); $("input[name=key]:checkbox").each(function(){ if (true == $(this).attr("checked")) { ids += $(this).attr(value)+,; flag += 1; } }); if(0 < flag) { $("#ids").attr("value",ids); return true; }else { alert(请至少选择一项！); return false; } }); }); 本源码的功能...

javascript-点击checkbox触发form表单提交事件【图】

如上图，点击checkbox时，下面的商品做出相应的涮选，再次点击时，取消之前筛选的限制项。我现在要做的是，当点击checkbox时，触发form表单提交事件，将checkbox的状态（0或1）通过GET传入后台做判断。这里应该怎么改尼？求教如果不用表单，用AJAX我也不是没想过，因为图上的 “销量”“人气”“价格”那些按钮，以及商品下面的分页我也没有用AJAX，所以怕数据取得有问题回复内容：如上图，点击checkbox时，下面的商品做出相应的...

layui怎么设置checkbox勾选【图】

方法1在返回的json中设置LAY_CHECKED为true，页面上的checkbox就是选中状态了。data":[{"name":"北京市","areaType":"省/直辖市","id":"110000","LAY_CHECKED":true},{"name":"市辖区","areaType":"地市","id":"110100","LAY_CHECKED":true},{"name":"县","areaType":"地市","id":"110200","LAY_CHECKED":false} ]相关推荐：《layui框架教程》方法2如果返回的数据中没有LAY_CHECKED怎么办？比如说返回的是这样的数据：data":[{"nam...

jquery如何判断checkbox（复选框）是否被选中?（源代码）

jquery如何判断checkbox（复选框）？相信有很多刚刚接触jquery的朋友都会有这样的疑问。本章就给大家介绍jquery如何判断checkbox（复选框）是否被选中。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。谁都知道在html如果一个复选框被选中是checked="checked"。但是我们如果用jquery alert($("#id").attr("checked")) 会提示您是true而不是checked。所以很多朋友判断 if($("#id").attr("checked")=="true") 这个...

如何使用el-checkbox实现全选（代码）

本篇文章给大家带来的内容是关于使用el-checkbox实现全选（代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。最近在公司接收到了一个需求，给收藏夹的书籍添加批量、全选删除实现思路：点击全选改变item的checked，改变item的checked，重新便利一下所有item的checked来改变全选的selectAll1）该组件基本功能已经实现，checkbox用的vant-ui，苦于官网没有这样功能的demo，我按照上面的思路实现，但头疼的是他...

首页 / JAVASCRIPT / javascript 多级checkbox选择效果

javascript 多级checkbox选择效果

内容导读

内容图文

内容总结

内容备注

内容手机端

【javascript 多级checkbox选择效果】教程文章相关的互联网学习教程文章

JAVASCRIPT - 相关标签

JAVASCRIPT - 技术教程分类

JAVASCRIPT - 最新教程

JAVASCRIPT - 最热教程