关于单选框、下拉框、复选框的数据回显问题以及全选和全不选
来源:互联网 发布:知乎他是谁 编辑:程序博客网 时间:2024/05/19 13:09
在列表显示的界面中通常都有编辑操作,进行编辑操作时通常就牵涉到数据的回显问题,本文中编辑界面和添加界面是在同一个界面。
页面中使用了jstl中的c标签,所以要先引用:
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<tr> <td>性别:</td> <td> <c:choose> <c:when test="${'男' eq pd.SEX}"> <input type="radio" name="sex" value="男" checked="checked">男 <input type="radio" name="sex" value="女">女 </c:when> <c:when test="${'女' eq pd.SEX}"> <input type="radio" name="sex" value="男" >男 <input type="radio" name="sex" value="女" checked="checked">女 </c:when> <c:otherwise> <input type="radio" name="sex" value="男" checked="checked">男 <input type="radio" name="sex" value="女">女 </c:otherwise> </c:choose> </td> </tr>
其中的${pd.SEX}是从后台拿到的数据然后和前台的进行比较,由于编辑界面和添加界面是在同一个界面,所以需要有一个默认值。
2、下拉框标签的数据回显:
<tr> <td>婚否:</td> <td><select name="select" id="select"> <option value="">--请选择--</option> <option value="已婚" <c:if test="${pd.HUN eq '已婚'}">selected</c:if> >已婚</option> <option value="未婚" <c:if test="${pd.HUN eq '未婚'}">selected</c:if> >未婚</option> </select></td></tr>
其中的${pd.HUN}是从后台拿到的数据然后和前台的进行比较,然后选中值相同的选项。
由于复选框的数据不确定,所以需要通过遍历比较才能将数据回显到界面中,通常有JQuery和jS两种实现方法。下面我介绍的是JS的实现方法:
HTML代码:
<tr> <td>爱好:</td> <td><input type="checkbox" name="like" id="like" value="Java">Java <input type="checkbox" name="like" id="like" value="C#">C# <input type="checkbox" name="like" id="like" value="PHP">PHP <input type="hidden" > </td> </tr>JS代码:
//当页面加载完成的时候,自动调用该方法 window.onload=function(){ var boxObj = document.getElementsByName("like"); //获取所有的复选框 var payment = '${pd.AIHAO}'; //用el表达式获取在控制层存放的复选框的值为字符串类型 var pay = payment.split(','); //去掉它们之间的分割符“,” var index = 0; for(i=0;i<boxObj.length;i++){ for(j=0;j<pay.length;j++){ if(boxObj[i].value == pay[j]) //如果值与修改前的值相等 { boxObj[i].checked= true; break; } } } };
JS代码中使用了window.onload
就是当界面加载完成时自动就会调用的方法。
以上就可以实现数据的回显了。
4、复选框的全选和全不选的实现:
HTML代码:
<tr> <th width="60px" align="center"><input type="checkbox" id="zcheckbox" onclick="checkAll(this)" /></th> <th width="60px" align="center">序号</th> <th width="60px" align="center">姓名</th> <th width="60px" align="center">性别</th> <th width="60px" align="center">婚否</th> <th width="60px" align="center">年龄</th> <th width="60px" align="center">爱好</th> <th width="60px" align="center">备注</th> <th width="60px" align="center">操作</th> </tr> <c:forEach items="${list}" var="l" varStatus="vs"> <tr> <td><input type="checkbox" name="cb" onclick="check(this)" value="${l.ID}" /></td>
JS代码:
<script type="text/javascript"> var number=0; //单击全选 function checkAll(checkBoxAll){ var elements = document.getElementsByName("cb"); if(checkBoxAll.checked){ //全选 for(var i=0;i<elements.length;i++){ var ele = elements[i]; ele.checked=true; } number=${list.size()}; }else{ //全不选 for(var i=0;i<elements.length;i++){ var ele = elements[i]; ele.checked=false; } number=0; } }; //点击每一条前的复选框的判断 function check(checkbox){ if(checkbox.checked){ number++; }else{ number--; } //如果长度等于循环出的条数,那么全选复选框选中,否则不选 var cBoxAll = document.getElementById("zcheckbox"); if(number==${list.size()}){ cBoxAll.checked=true; }else{ cBoxAll.checked=false; } }; </script>
阅读全文
1 0
- 关于单选框、下拉框、复选框的数据回显问题以及全选和全不选
- 关于单选框、下拉框、复选框的数据回显问题以及全选和全不选
- 复选框的全选和全不选 以及 复选框动态拼接 提交 复选框结果
- 关于复选框全选问题
- 关于下拉框,复选框的问题
- 复选框全选与全不选的问题
- 关于复选框全选,全不选以及使用按钮传值
- 复选框的全选和全不选
- checkbox复选框的全选和全不选
- webjs--全选和全不选的复选框
- 关于复选框全选反选问题的实例
- jquery关于复选框的全选
- js全选 复选框的问题
- jquery复选框全选获取下拉框的值
- 复选框的全选
- ASP.NET(C#)初积累!(复选框全选,下拉框以及下拉框联动)
- 复选框全选,全不选
- 复选框全选、全不选
- C语言(九):字符串
- 无根树任意根深度
- ATcoder Grander Contest 17C Snuke and Spells 附题意
- Makefile中的wildcard用法
- jQuery中.bind() .live() .delegate() .on()区别
- 关于单选框、下拉框、复选框的数据回显问题以及全选和全不选
- 海盗分金
- php截取字符串最后一位
- 欢迎使用CSDN-markdown编辑器
- 类锁和对象锁
- Head First设计模式笔记(单例模式)
- JZOJ__Day 5:【普及模拟】权势二进制
- 关于CSS3中伪类选择器的-E:nth-child(an + b) n 取值范围
- caffe docker