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

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

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

[html] view
plain copy

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

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

[html] view
plain copy

<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、下拉框标签的数据回显：

[html] view
plain copy

<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代码：

[html] view
plain copy

<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代码：

[javascript] view
plain copy

//当页面加载完成的时候，自动调用该方法  

              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代码：

[html] view
plain copy

<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代码：

[javascript] view
plain copy

<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>  

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