关于单选框、下拉框、复选框的数据回显问题以及全选和全不选

在列表显示的界面中通常都有编辑操作，进行编辑操作时通常就牵涉到数据的回显问题，本文中编辑界面和添加界面是在同一个界面。

页面中使用了jstl中的c标签，所以要先引用：

[html]  view plain  copy

1. <%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>  

1、单选按钮的数据回显：

[html]  view plain  copy

1. <tr>  
2.     <td>性别:</td>  
3.     <td>  
4.         <c:choose>  
5.         <c:when test="${'男' eq pd.SEX}">  
6.         <input type="radio" name="sex" value="男" checked="checked">男    
7.         <input type="radio" name="sex" value="女">女  
8.         </c:when>  
9.         <c:when test="${'女' eq pd.SEX}">  
10.         <input type="radio" name="sex" value="男" >男    
11.         <input type="radio" name="sex" value="女" checked="checked">女  
12.         </c:when>  
13.         <c:otherwise>  
14.         <input type="radio" name="sex" value="男" checked="checked">男    
15.         <input type="radio" name="sex" value="女">女  
16.         </c:otherwise>  
17.         </c:choose>         
18.     </td>     
19.  </tr>  

其中的${pd.SEX}是从后台拿到的数据然后和前台的进行比较，由于编辑界面和添加界面是在同一个界面，所以需要有一个默认值。

2、下拉框标签的数据回显：

[html]  view plain  copy

1. <tr>  
2.     <td>婚否:</td>  
3.     <td><select name="select" id="select">  
4.     <option value="">--请选择--</option>  
5.     <option value="已婚" <c:if test="${pd.HUN eq '已婚'}">selected</c:if> >已婚</option>  
6.     <option value="未婚" <c:if test="${pd.HUN eq '未婚'}">selected</c:if> >未婚</option>  
7.     </select></td>  
8. </tr>  

其中的${pd.HUN}是从后台拿到的数据然后和前台的进行比较，然后选中值相同的选项。

3、复选框的数据回显：

由于复选框的数据不确定，所以需要通过遍历比较才能将数据回显到界面中，通常有JQuery和jS两种实现方法。下面我介绍的是JS的实现方法：

HTML代码：

[html]  view plain  copy

1. <tr>  
2.     <td>爱好:</td>  
3.     <td><input type="checkbox" name="like" id="like" value="Java">Java  
4.         <input type="checkbox" name="like" id="like" value="C#">C#  
5.         <input type="checkbox" name="like" id="like" value="PHP">PHP  
6.         <input type="hidden" >  
7.     </td>  
8.     </tr>  

JS代码：

[javascript]  view plain  copy

1. //当页面加载完成的时候，自动调用该方法  
2.               window.οnlοad=function(){  
3.                   var boxObj = document.getElementsByName("like");  //获取所有的复选框  
4.                   var payment = '${pd.AIHAO}'; //用el表达式获取在控制层存放的复选框的值为字符串类型  
5.                   var pay = payment.split(',');    //去掉它们之间的分割符“，”     
6.                   var index = 0;  
7.                   for(i=0;i<boxObj.length;i++){  
8.                      for(j=0;j<pay.length;j++){              
9.                     if(boxObj[i].value == pay[j])  //如果值与修改前的值相等  
10.                     {  
11.                         boxObj[i].checked= true;  
12.                          break;  
13.                     }  
14.                     }  
15.                 }                   
16.              };  

JS代码中使用了window.onload

就是当界面加载完成时自动就会调用的方法。

以上就可以实现数据的回显了。

4、复选框的全选和全不选的实现：

HTML代码：

[html]  view plain  copy

1. <tr>  
2.     <th width="60px" align="center"><input type="checkbox" id="zcheckbox" onclick="checkAll(this)" /></th>  
3.     <th width="60px" align="center">序号</th>  
4.     <th width="60px" align="center">姓名</th>  
5.     <th width="60px" align="center">性别</th>  
6.     <th width="60px" align="center">婚否</th>  
7.     <th width="60px" align="center">年龄</th>  
8.     <th width="60px" align="center">爱好</th>  
9.     <th width="60px" align="center">备注</th>  
10.     <th width="60px" align="center">操作</th>  
11.     </tr>  
12.     <c:forEach items="${list}" var="l" varStatus="vs">  
13.     <tr>  
14.     <td><input type="checkbox" name="cb" onclick="check(this)" value="${l.ID}" /></td>  

JS代码：

[javascript]  view plain  copy

1. <script type="text/javascript">  
2.           var number=0;  
3.           //单击全选  
4.           function checkAll(checkBoxAll){  
5.               var elements = document.getElementsByName("cb");  
6.               if(checkBoxAll.checked){  
7.                   //全选  
8.                   for(var i=0;i<elements.length;i++){  
9.                       var ele = elements[i];  
10.                      ele.checked=true;  
11.                  }  
12.                  number=${list.size()};  
13.              }else{  
14.                  //全不选  
15.                  for(var i=0;i<elements.length;i++){  
16.                      var ele = elements[i];  
17.                      ele.checked=false;  
18.                  }  
19.                  number=0;  
20.              }  
21.          };  
22.            
23.         //点击每一条前的复选框的判断  
24.          function check(checkbox){  
25.              if(checkbox.checked){  
26.                  number++;  
27.              }else{  
28.                  number--;  
29.              }  
30.                
31.              //如果长度等于循环出的条数，那么全选复选框选中，否则不选  
32.              var cBoxAll = document.getElementById("zcheckbox");  
33.              if(number==${list.size()}){  
34.                  cBoxAll.checked=true;  
35.              }else{  
36.                  cBoxAll.checked=false;  
37.              }  
38.          };  
39.  </script>  

通过上面的这些代码就可以将普通界面中的数据全部回显出来了