關於單選框、下拉框、複選框的數據回顯問題以及全選和全不選

在列表顯示的界面中通常都有編輯操作，進行編輯操作時通常就牽涉到數據的回顯問題，本文中編輯界面和添加界面是在同一個界面。

頁面中使用了jstl中的c標籤，所以要先引用：

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

1、單選按鈕的數據回顯：

<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}是從後臺拿到的數據然後和前臺的進行比較，然後選中值相同的選項。

3、複選框的數據回顯：

由於複選框的數據不確定，所以需要通過遍歷比較才能將數據回顯到界面中，通常有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.οnlοad=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" οnclick="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" οnclick="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>

通過上面的這些代碼就可以將普通界面中的數據全部回顯出來了。