`
capple84
  • 浏览: 7943 次
  • 性别: Icon_minigender_1
  • 来自: 深圳
社区版块
存档分类
最新评论

jsp checkbox和radio级联控件.

    博客分类:
  • JSP
阅读更多
最近项目需要一个控件,支持动态生成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>
分享到:
评论

相关推荐

    带CheckBox和级联操作的Tree

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

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

    checkBox.selected = true; } else if (state == STATE_UNCHECKED) { checkBox.selected = false; } else if (state == STATE_SCHRODINGER) { checkBox.selected = false; }else{ checkBox.selected = false; } ...

    Android 开灯 关灯 checkbox Radio组件用法演示.rar

    Android 开灯 关灯 checkbox Radio组件用法演示,向大家展示了如何为CheckBox和RadioButton添加监听器及开关灯业务代码,通过单击不同的按钮,切换开灯图片和关灯图片,设置程序操作状态如下:  public void ...

    019_UI_常用组件-BasicViews-button-checkbox-radio

    在Android UI设计中,BasicViews是一组基础的视图组件,包括按钮(Button)、复选框(Checkbox)和单选按钮(Radio Button),这些都是构建用户界面不可或缺的部分。本教程“019_UI_常用组件-BasicViews-button-...

    外观时尚的纯CSS3美化Checkbox和Radiobox按钮源码.zip

    外观时尚的纯CSS3美化Checkbox和Radiobox按钮源码.zip 外观时尚的纯CSS3美化Checkbox和Radiobox按钮源码.zip 外观时尚的纯CSS3美化Checkbox和Radiobox按钮源码.zip

    Delphi动态创建和载入CheckBox控件.rar

    在Delphi编程环境中,动态创建和载入CheckBox控件是一项基本但重要的技能,尤其是在构建复杂的用户界面时。这个示例项目“Delphi动态创建和载入CheckBox控件”旨在帮助初学者理解如何在运行时根据需求创建控件,并且...

    HTML5 CheckBox Radio按钮美化特效.rar

    基于jquery HTML5 CheckBox Radio按钮美化特效,演示了不一样的checkbox和Radiobox,加入了点击动画效果,鼠标点击后选中状态也是与默认的风格不一样,如截图所示的为本款效果,更多详情细节请下载本示例自己测试...

    jsp实现checkbox的ajax传值实例.docx

    在`up-ajx.jsp`中,你可以使用以下代码来获取和处理传递的复选框值: ```java String[] atitles = request.getParameterValues("atitle"); if (atitles != null) { for (String atitle : atitles) { // 对每个...

    ExpandAbleListView+checkbox数组方式级联,点击选择顶部文本显示,可删除

    ExpandAbleListView+checkbox数组方式级联,外层列表可展开收起,内层列表使用checkbox多选框,点击之后可在顶部的gridlayout显示,顶部显示的选中与checkbox选中状态关联,点击顶部选中的item,可取消选中状态,...

    JQuery操作checkbox、radio等示例

    本篇文章将深入探讨如何使用jQuery来操作checkbox和radio元素,这两种元素在表单提交和用户交互中扮演着重要角色。 首先,让我们了解checkbox和radio的基本概念。Checkbox用于提供多选选项,用户可以勾选多个选项;...

    兼容IE8的CSS Checkbox和Radio美化插件

    checkbox_radio.css是一款用于美化Checkbox和Radio控件的CSS小插件。通过checkbox_radio提供的样式,你可以生成基于bootstrap,或字体图标,或图片的Checkbox和Radio美化样式。

    精英stm32f103开发板CHECKBOX小工具.zip.zip

    精英stm32f103开发板CHECKBOX小工具.zip.zip

    《Android开发视频教程》第十二集:CheckBox复选框控件使用.zip

    《Android开发视频教程》第十二集:CheckBox复选框控件使用.zip

    jsp中checkbox用法详解.docx

    - **ASP.NET服务器端控件**:在ASP.NET中,也提供了类似于`RadioButtonList`、`DropDownList`和`CheckBoxList`这样的服务器端控件,它们可以提供更丰富的功能和更好的用户体验。 - **jQuery中`:checkbox`选择器**:...

    Android CheckBox与监听Demo源码.rar

    checkBox.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() { @Override public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) { if (isChecked) { // 复选框...

    纯CSS美化input radio checkbox样式.zip

    综上所述,这个“纯CSS美化input radio checkbox样式.zip”资源提供了一套完整的解决方案,通过纯CSS3技术对input的radio和checkbox进行美化,让网页的交互元素更加美观、一致且符合现代设计趋势。设计师和开发者...

    纯css3漂亮的checkbox和radio美化效果插件pretty.css.zip

    "纯css3漂亮的checkbox和radio美化效果插件pretty.css.zip"正是这样一个利用CSS3特性来提升网页中复选框(checkbox)和单选按钮(radio)视觉效果的工具。本文将深入探讨这个插件的工作原理、主要特点以及如何在项目...

    jquery iCheck.js实现的自定义复选框checkbox和单选框radio样式插件.zip

    在Web开发中,我们经常需要对用户进行多选或单选操作的交互设计,这时候复选框(checkbox)和单选框(radio)就显得尤为重要。然而,原生HTML的样式相对单一,无法满足设计师和开发者对于界面美观度的需求。为了解决...

    css3制作checkbox单选按钮美化代码.zip

    总之,通过这个压缩包,开发者可以学习到如何使用CSS3来美化传统的checkbox和radio单选按钮,从而提高网页的视觉吸引力和交互体验。这是一项实用的技巧,尤其在前端开发中,对于提升网站的专业感和用户体验有着重要...

Global site tag (gtag.js) - Google Analytics