`

checkbox多选框级联勾选(父类被都选之后相应的子类也被勾选)

    博客分类:
  • js
阅读更多
<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
 <%response.setHeader("Pragma","No-cache");
response.setHeader("Cache-Control","no-cache");
response.setDateHeader("Expires", 0);
response.flushBuffer();%>  
    <%@ include file="/util/taglib.jsp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=gbk">
<script type="text/javascript">
	//级联勾选函数
	function getchecks() {
		var parentCategorys = document.getElementsByName("parentchk");
		for (var k=0; k<parentCategorys.length; k++){
			var test = parentCategorys[k];
			if (test.checked) {
				var id = test.id;
				var childs = document.getElementsByName("chk");
				var a = 0;
				for (var i=0; i<childs.length; i++){
					var child = childs[i];
					var parentid = child.id;
					//alert(id==parentid);
					if (id==parentid) {
						child.checked = true;
					}
				}
			}else{
				continue;
			}
		}
	}

</script>
<title>人群关联度</title>
</head>
<body>
<div class="page">
	<div class="pageHeader">
	</div>
	<div class="pageContent">
	<form method="post" id="addre" action="${pageContext.request.contextPath }/exactrelated.do?action=categoryRes&flag=save" class="pageForm required-validate" onsubmit="return validateCallback(this);">
		<input type="hidden" name="categoryId" value="${categoryId }"/>
			<div class="pageFormContent" layoutH="56" width="60">
			<!-- 父类循环,父类被勾选的时候下面的子类都相应的被勾选上 -->
			<c:forEach items="${parentCategoryList}" var="m">
			
					<c:if test="${m.pid == 0}">
						<p>
						 <c:choose>
						<c:when test="${m.flag==0}">
							<label><input type="checkbox" id="${m.categoryId }" name="parentchk" value="${m.categoryId }" checked onclick="getchecks()"/>&nbsp;&nbsp;<font style="color:red">${m.categoryName }</font></label>					
						</c:when>
						
						<c:otherwise>
							<label><input type="checkbox" id="${m.categoryId }" name="parentchk" value="${m.categoryId }" onclick="getchecks()" />&nbsp;&nbsp;<font style="color:red">${m.categoryName }</font></label>					
						</c:otherwise>
						</c:choose>
						</p>					
					</c:if>
					<!-- 子类循环 -->
					<c:forEach items="${categoryList}" var="l">
						<c:if test="${m.categoryId == l.pid}">
								<p>
								 <c:choose>
								<c:when test="${l.flag==0}">
									<label><input type="checkbox" flag="${m.categoryId }"  id="${l.pid}" name="chk" value="${l.categoryId }" checked/>&nbsp;&nbsp;${l.categoryName }</label>					
								</c:when>
								
								<c:otherwise>
									<label><input type="checkbox" flag="${m.categoryId }" id="${l.pid }" name="chk" value="${l.categoryId }" />&nbsp;&nbsp;${l.categoryName }</label>					
								</c:otherwise>
								</c:choose>
								</p>
						</c:if>
					</c:forEach>	
				
				<div class="divider"></div>
				</c:forEach>
			
			</div>
			<div class="formBar">
				<ul>					
					<li><div class="buttonActive"><div class="buttonContent"><button type="submit">保存</button></div></div></li>
					<li>
						<div class="button"><div class="buttonContent"><button type="Button" onclick="navTab.closeCurrentTab()">取消</button></div></div>
					</li>
				</ul>
			</div>
	</form>
	</div>
</div>
</body>
 </html>
分享到:
评论

相关推荐

    flex tree+checkbox级联勾选

    更重要的是,级联勾选(Cascading Checkbox Selection)功能使得当一个父节点被选中或取消选中时,其所有子节点都会自动跟随改变状态。这对于处理大量关联数据时非常有用,用户只需要操作一次父节点就能影响到所有子...

    js实现checkbox级联选择

    使用javascript实现checkbox级联选择

    Flex tree+checkbox可实现级联勾选 修改

    flex tree+checkbox可实现级联勾选 修改后 修改CheckTreeDemoRenderer.as这个文件中 while (!cursor.afterLast){ if (cursor.current.@state == STATE_CHECKED) { noChecks++; }else if (cursor.current.@state =...

    CheckBox分级选中 复选框 上下级 联动

    如果父级复选框被取消选中,所有子级复选框也应取消选中。这可以通过JavaScript实现,监听`change`事件并根据当前复选框的`checked`状态和层级关系更新相关节点。 在JavaScript中,我们可以这样处理: ```...

    html5 css3制作checkbox多选框选中样式特效

    本教程将详细讲解如何利用HTML5和CSS3来创建一个具有独特选中样式的checkbox多选框特效。 首先,HTML5的`&lt;input&gt;`标签用于创建交互元素,其中`type="checkbox"`属性定义了一个复选框。基本的HTML结构可能如下: ``...

    checkbox复选框传值

    在网页设计和开发中,复选框(Checkbox)是一种常见的用户界面元素,允许用户从多个选项中选择一个或多个。当涉及到数据提交,比如通过HTML表单POST方法将用户的选择发送到服务器并存储到数据库中时,理解如何处理复...

    级联勾选菜单

    这种菜单通过一个或多个层级的勾选框(checkbox)来实现子项与父项之间的勾选联动,使得用户在进行选项选择时,能够更加直观和高效地操作。 ### 核心概念解析 #### 1. 级联勾选机制 级联勾选菜单的核心在于其勾选...

    checkbox 用shift键 级联选择

    "checkbox 用shift键 级联选择"这个话题涉及到一种提高用户效率的交互设计,它允许用户通过按下Shift键快速选择一系列连续的复选框(checkboxes)。在网页或应用程序中,复选框通常用于让用户在多个选项中进行多选。...

    QT QTreeWidget添加复选框

    如果所有子项都被选中,父级复选框应显示为全选状态。 在实际应用中,"testCheckedTree"可能是一个包含示例代码的文件,例如,它可能包含了一个已实现上述功能的QTreeWidget实例。这个文件可能包括了创建自定义...

    js checkbox全选 反选 取消全部设置表单html复选框勾选

    每个复选框都有一个`value`属性,用来表示其值,以及一个`checked`属性,用于指示当前是否被选中。 全选功能通常需要一个主控复选框,当用户点击这个主控复选框时,所有相关的子复选框都被选中。这可以通过获取所有...

    ListView添加CheckBox复选框

    本篇文章将详细讲解如何在ListView中实现CheckBox复选框的功能。 首先,我们需要创建一个自定义的ListView适配器。适配器是连接数据源和ListView的关键,它负责将数据转化为可显示的视图。创建一个继承自`...

    Uniapp checkbox 多选框组件 自行修改 checkbox

    方便大家复制粘贴使用,提高大家的效率。...全端都支持 引入组件即可 &lt;TC-checkbox&gt;&lt;/TC-checkbox&gt; 如需要删除多余的部分 uni_modules/TC-checkbox/components/TC-checkbox/TC-checkbox 以上路径上进行修改即可

    两个jsp页面之间传值的问题,和checkbox多选框之间的问题

    本篇文章将聚焦于“两个JSP页面之间传值的问题”以及与之相关的“checkbox多选框”处理。博主houyajie在iteye博客上分享了这个问题的解决方案,让我们深入探讨一下。 首先,我们来看JSP页面间传值的基本方法: 1. ...

    tagsinput.js 实现记录checkbox勾选顺序

    在这个场景中,我们关注的是它如何实现记录checkbox(复选框)的勾选顺序,并在页面上展示,同时能够将这些值传递给后台。下面将详细解释这一技术实现。 首先,复选框在网页表单中被广泛使用,让用户可以选择多个...

    纯JS+HTML写的checkBox Tree 级联选中 好用无BUG

    在前端开发中,CheckBox Tree(复选框树)是一种常见的组件,用于展示具有层级关系的数据,并支持用户进行多级选择。这个"纯JS+HTML写的checkBox Tree 级联选中"实例,解决了其他示例中可能存在的BUG,提供了一个...

    带有checkbox的TREE列表级联的选择子栏目的JAVA标签形式的实现

    本文将详细讲解如何实现一个带有复选框(Checkbox)的树形列表(TREE LIST)的级联选择功能,以及相关的Java标签形式实现。这种功能常见于权限管理、组织结构选择等场景,让用户能够方便地进行多层级的勾选操作。 ...

    隐藏layui数据表格表头的checkbox复选框

    ### 隐藏LayUI数据表格表头的Checkbox复选框方法详解 #### 背景介绍 在前端开发过程中,经常会使用到LayUI框架搭建网页应用,尤其是在设计复杂的数据展示界面时,LayUI提供了强大的数据表格功能。然而,在某些场景...

    vue基于element-ui的三级CheckBox复选框功能的实现代码.zip

    `el-checkbox-group` 是一个容器,用于管理多个 `el-checkbox` 组件,而 `el-checkbox` 则是具体的单个复选框元素。在实现三级复选框时,通常需要处理嵌套关系,即一个复选框的选择可能会影响其子复选框的状态。 ...

    带CheckBox和级联操作的Tree

    带CheckBox和级联操作的Tree 带CheckBox和级联操作的Tree 带CheckBox和级联操作的Tree

Global site tag (gtag.js) - Google Analytics