jsp checkbox和radio级联控件.

最新推荐文章于 2017-01-15 14:00:29 发布

capple84

最新推荐文章于 2017-01-15 14:00:29 发布

阅读量212

点赞数

分类专栏： JSP 文章标签： jsp checkbox radio 级联动态生成

本文链接：https://blog.csdn.net/capple84/article/details/84054358

版权

JSP 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

最近项目需要一个控件，支持动态生成chenkbox，radio。具有默认选中和级联的控件。实现如下：
JSP页面为：


<!--hangyeList、yewuList、yingxiaoList为后台查询各个部门用户集合，用于动态生成radio和checkbox -->
<tr>
					<td align="right" nowrap="nowrap" class="title">
						审批:
					</td>
					<td class="bgcolor_gray">
						<input type="checkbox" name="hangyeCheck" value="checkbox" onclick="return false" checked /><!-- 默认行业处必须选中 -->
						行业处审核
						<% for (int i=0;i< hangyeList.size();i++){ %>
                			<%  SysUser nextUser = (SysUser)hangyeList.get(i); %>
                			<% if(i==0){ %>
                				<input type= "radio"  name= "nextUserNameHangye" checked="true" value= "<%= nextUser.getUserCd()%>" /><%= nextUser.getUserName()%>
                			<%}else{ %>
                				<input type= "radio"  name= "nextUserNameHangye"  value= "<%= nextUser.getUserCd()%>" /><%= nextUser.getUserName()%>
                			<%} %>
                		<%} %>	
                		<br />
						<input type="checkbox" id="yewuCheck" name="yewuCheck" value="checkbox" onclick="checkfunc('yewuCheck','nextUserNameYewu','<%=yewuList.size() %>')" />
						业务管理处审核
						<% for (int i=0;i< yewuList.size();i++){ %>
                			<%  SysUser nextUser = (SysUser)yewuList.get(i); %>
                			<input type= "radio" id="nextUserNameYewu<%=i %>" name= "nextUserNameYewu" value= "<%= nextUser.getUserCd()%>" onclick="radiofunc('yewuCheck','nextUserNameYewu','<%=yewuList.size() %>')"/><%= nextUser.getUserName()%>
                		<%} %>	
                		<br />
						<input type="checkbox" id="yingxiaoCheck" name="yingxiaoCheck" value="checkbox" onclick="checkfunc('yingxiaoCheck','nextUserNameYingxiao','<%=yingxiaoList.size() %>')"/>
						营销服务处审核
						<% for (int i=0;i< yingxiaoList.size();i++){ %>
                			<%  SysUser nextUser = (SysUser)yingxiaoList.get(i); %>
                			<input type= "radio" id="nextUserNameYingxiao<%=i %>" name= "nextUserNameYingxiao" value= "<%= nextUser.getUserCd()%>" onclick="radiofunc('yingxiaoCheck','nextUserNameYingxiao','<%=yingxiaoList.size() %>')"/><%= nextUser.getUserName()%>
                		<%} %>	
                		<br />
					</td>
				</tr>

JS事件为：


<script type="text/javascript">
	/***
	*@note checkbox和radio 级联控件 监听父节点事件 三个传入参数为 #父节点ID名称 #子节点ID民称 #子节点的集合大小
	*@author cuijsh
	*****/
	function checkfunc(check,nextUserName,listSize){
		var yewuCheck = document.getElementById(check);
		var nextUserNameYewu = "";
		if(yewuCheck.checked==true){
			for(var h=0;h<listSize;h++){
				nextUserNameYewu = document.getElementById(nextUserName+h);//用集合的下标来控制选中的是哪一个radio
				if(h==0) nextUserNameYewu.checked = true;
			}
		}else{
			for(var h=0;h<listSize;h++){
				nextUserNameYewu = document.getElementById(nextUserName+h);
				nextUserNameYewu.checked = false;
			}
		}
	}
	/***
	*@note checkbox和radio 级联控件 监听子节点事件 三个传入参数为 #父节点ID名称 #子节点ID民称 #子节点的集合大小
	*@author cuijsh
	*****/
	function radiofunc(check,nextUserName,listSize){
		var yewuCheck = document.getElementById(check);
		var nextUserNameYewu = "";
		for(var h=0;h<listSize;h++){
			nextUserNameYewu = document.getElementById(nextUserName+h);
			if(nextUserNameYewu.checked == true) yewuCheck.checked = true;
		}
	}
</script>