最近项目需要一个控件,支持动态生成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.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组件用法演示,向大家展示了如何为CheckBox和RadioButton添加监听器及开关灯业务代码,通过单击不同的按钮,切换开灯图片和关灯图片,设置程序操作状态如下: public void ...
在Android UI设计中,BasicViews是一组基础的视图组件,包括按钮(Button)、复选框(Checkbox)和单选按钮(Radio Button),这些都是构建用户界面不可或缺的部分。本教程“019_UI_常用组件-BasicViews-button-...
外观时尚的纯CSS3美化Checkbox和Radiobox按钮源码.zip 外观时尚的纯CSS3美化Checkbox和Radiobox按钮源码.zip 外观时尚的纯CSS3美化Checkbox和Radiobox按钮源码.zip
在Delphi编程环境中,动态创建和载入CheckBox控件是一项基本但重要的技能,尤其是在构建复杂的用户界面时。这个示例项目“Delphi动态创建和载入CheckBox控件”旨在帮助初学者理解如何在运行时根据需求创建控件,并且...
基于jquery HTML5 CheckBox Radio按钮美化特效,演示了不一样的checkbox和Radiobox,加入了点击动画效果,鼠标点击后选中状态也是与默认的风格不一样,如截图所示的为本款效果,更多详情细节请下载本示例自己测试...
在`up-ajx.jsp`中,你可以使用以下代码来获取和处理传递的复选框值: ```java String[] atitles = request.getParameterValues("atitle"); if (atitles != null) { for (String atitle : atitles) { // 对每个...
"checkbox-ng-0.1.tar.gz"是这个包的文件名,它遵循了Python包常见的命名规范,由项目名(checkbox-ng)和版本号(0.1)组成,并以.tar.gz为后缀,意味着它是用tar工具打包并经过gzip压缩的文件。 描述中的"资源...
ExpandAbleListView+checkbox数组方式级联,外层列表可展开收起,内层列表使用checkbox多选框,点击之后可在顶部的gridlayout显示,顶部显示的选中与checkbox选中状态关联,点击顶部选中的item,可取消选中状态,...
本文将深入探讨如何实现一个具有三种状态的纯Material风格的Android Checkbox控件,以及与之相关的Android开发知识。 Checkbox在Android中通常用于提供多选选项,它的默认状态只有两种:选中和未选中。然而,有时...
本篇文章将深入探讨如何使用jQuery来操作checkbox和radio元素,这两种元素在表单提交和用户交互中扮演着重要角色。 首先,让我们了解checkbox和radio的基本概念。Checkbox用于提供多选选项,用户可以勾选多个选项;...
checkbox_radio.css是一款用于美化Checkbox和Radio控件的CSS小插件。通过checkbox_radio提供的样式,你可以生成基于bootstrap,或字体图标,或图片的Checkbox和Radio美化样式。
本文将深入探讨CheckBox控件的使用,包括其基本属性、事件和方法,以及如何在实际项目中应用。 1. **基本属性**: - `Text`:显示在CheckBox旁边的文本,通常用来描述该选项的内容。 - `Checked`:指示CheckBox...
精英stm32f103开发板CHECKBOX小工具.zip.zip
《Android开发视频教程》第十二集:CheckBox复选框控件使用.zip
- **ASP.NET服务器端控件**:在ASP.NET中,也提供了类似于`RadioButtonList`、`DropDownList`和`CheckBoxList`这样的服务器端控件,它们可以提供更丰富的功能和更好的用户体验。 - **jQuery中`:checkbox`选择器**:...
checkBox.setOnCheckedChangeListener(new CompoundButton.OnCheckedChangeListener() { @Override public void onCheckedChanged(CompoundButton buttonView, boolean isChecked) { if (isChecked) { // 复选框...
综上所述,这个“纯CSS美化input radio checkbox样式.zip”资源提供了一套完整的解决方案,通过纯CSS3技术对input的radio和checkbox进行美化,让网页的交互元素更加美观、一致且符合现代设计趋势。设计师和开发者...