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

最新推荐文章于 2022-10-09 14:09:30 发布

SuperHong123

最新推荐文章于 2022-10-09 14:09:30 发布

阅读量1.3k

点赞数

分类专栏： js 文章标签： html

本文链接：https://blog.csdn.net/u011004598/article/details/84610113

版权

js 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

<%@ 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()"/>  <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()" />  <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/>  ${l.categoryName }</label>					
								</c:when>

								<c:otherwise>
									<label><input type="checkbox" flag="${m.categoryId }" id="${l.pid }" name="chk" value="${l.categoryId }" />  ${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>

SuperHong123

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
checkbox多选框级联勾选(父类被都选之后相应的子类也被勾选)

[code="html"] //级联勾选函数 function getchecks() { var parentCategorys = document.getElementsByName("parentchk"); for (var k=0; k ...
复制链接

扫一扫