zoukankan      html  css  js  c++  java
  • checkbox的标签和全选中问题

    在JSP里,checkbox有几种表达方式,常见的两种主要有:

     <input type="checkbox" name="Car" >

     <form:checkbox path="allCheckFlg" id="allCheckFlg" value="${depsForm.allCheckFlg}"/>

     

    其中<form:checkbox.../>标签来自于(org.springframework.web.servlet.tags.form.CheckboxTag)这个Spring标签库。

    当Checkbox是选中状态的时候标签为<input type="checkbox" name="car" checked/>,

                        非选中的时候标签<input type="checkbox" name="car"/>

    JS利用取得值得长度为空则为非选中,反之为选中。

     

    但是如果使用Spring的标签库的话,例如<form:checkbox path="allCheckFlg" id="allCheckFlg" value="${depsForm.allCheckFlg}"/>,当checkbox为选中状态时候,value的值为true,非选中的时候为false。传到服务器端的这个结果可以直接用来判断,更方便。

    另外还有许多个checkbox列表全选中checkbox的问题,首先,此列表中的每一个 checkbox当先选中“全选中”的时候,对应所有checkbox都选中,当先非选中“全选中”的时候,对应对应所有checkbox都不选中,反之亦然。即列表中的checkbox和全选中的checbox是要求对应的。当然,列表中checkbox的ID和Name属性要保持一致。

    在没有用任何框架的情况下,最基础的方法是用javascript来实现,参照如下:<script language="javascript"> 


    //选中全选按钮,下面的checkbox全部选中 
    var selAll = document.getElementById("selAll"); 
    function selectAll() 

      var obj = document.getElementsByName("checkAll"); 
      if(document.getElementById("selAll").checked == false) 
      { 
         for(var i=0; i<obj.length; i++) 
          { 
         obj[i].checked=false; 
          } 
      }else 
        { 
           for(var i=0; i<obj.length; i++) 
        {   
             obj[i].checked=true; 
      }
     }   


    //当选中所有的时候,全选按钮会勾上 
    function setSelectAll() 

      var obj=document.getElementsByName("checkAll"); 
      var count = obj.length; 
      var selectCount = 0; 

    for(var i = 0; i < count; i++) 
     { 
      if(obj[i].checked == true) 
         { 
            selectCount++;
         } 
     } 
    if(count == selectCount) 
    {
       document.all.selAll.checked = true; 

    else 

       document.all.selAll.checked = false; 



    //反选按钮 
    function inverse() { 
    var checkboxs=document.getElementsByName("checkAll"); 
    for (var i=0;i<checkboxs.length;i++) { 
      var e=checkboxs[i]; 
      e.checked=!e.checked; 
      setSelectAll(); 



    </script> 

    <html> 
    <body> 
    <center> 
    <input type="checkbox" id="selAll" onclick="selectAll();" />全选 
    <input type="checkbox" id="inverse" onclick="inverse();" />反选 
    <div id="allcheck"> 
    <input type="checkbox" name="checkAll" id="checkAll" onclick="setSelectAll();"/>足球<br> 
    <input type="checkbox" name="checkAll" id="checkAll" onclick="setSelectAll();"/>篮球<br> 
    <input type="checkbox" name="checkAll" id="checkAll" onclick="setSelectAll();"/>跑步<br> 
    <input type="checkbox" name="checkAll" id="checkAll" onclick="setSelectAll();"/>登山<br> 
    <input type="checkbox" name="checkAll" id="checkAll" onclick="setSelectAll();"/>唱歌<br> 
    <input type="checkbox" name="checkAll" id="checkAll" onclick="setSelectAll();"/>跳舞<br> 
    </div>
    </center> 
    </body> 
    </html> 

     

    还有一种方法是用jQuery,代码量少一点。jQuery里面封装了大量的函数(也就是事件方法),就像Java的工具类一样,可以直接调用。例如,下面用到的jQueryObject.prop( propertyName [, value ] )

    函数功能是设置或返回指定属性propertyName的值。如果指定了value参数,则表示设置属性propertyName的值为value;如果没有指定value参数,则表示返回属性propertyName的值。如果需要删除DOM元素的属性,请使用removeProp()函数。总之prop函数跟设置属性相关。可以利用工具手册找到自己需要的函数。

        // 全选框

        $(function() {

            $("#allCheckFlg").click(function() {

                $('input[id="checkItem"]').prop("checked", this.checked);

             });

            var $checkItem = $("input[id='checkItem']");

            $checkItem

                    .click(function() {

                        $("#allCheckFlg")

                                .prop(

                                        "checked",

                                       // 如果id为checkItem的checbox的长度和id为checkItem的且选中状态下的checbox长度一样,则返回true,反之返回false

                                        $checkItem.length == $("input[id='checkItem']:checked").length ? true : false);

                    });

        });

                        .....................略........................

    <div style="height:330px; 1281px;" id="Detail">
      <table border="1" style="1280px;margin-left:20px;">
        <thead>
          <th style="background-color:#99C; 60px; text-align:center;">
         <form:checkbox path="allCheckFlg" id="allCheckFlg" value="${depsForm.allCheckFlg}"/>全选中</th>
         <th style="background-color:#99C; 60px; text-align:center;">序号</th>
         <th style="background-color:#99C; 90px; text-align:center;">部门编码</th>
         <th style="background-color:#99C; 120px; text-align:center;">部门名称</th>
         <th style="background-color:#99C; 200px; text-align:center;">备注</th>
         <th style="background-color:#99C; 60px; text-align:center;">停用Flg</th>
        </thead>
    <tbody>
    <c:forEach var="departmentInfo" items="${depsForm.departmentList}" varStatus="st">
         <tr>
           <td style="text-align: center;">
             <form:checkbox path="departmentList[${st.index}].checkItem" id="checkItem" value="${departmentInfo.checkItem}"></form:checkbox>
           </td>
           <td style="text-align: center;"><c:out value="${st.index+1 }"></c:out></td>
           <td style="text-align: center;"><c:out value="${departmentInfo.code }"></c:out></td>
           <td style="text-align: center;"><c:out value="${departmentInfo.name }"></c:out></td>
           <td style="text-align: center;"><c:out value="${departmentInfo.remark }"></c:out></td>
           <c:if test="${departmentInfo.disabledflg==1}">
             <td style="text-align: center;">
              <input type="checkbox" name="disabledflg" checked="checked" disabled="disabled" /></td>
            </c:if>
           <c:if test="${departmentInfo.disabledflg==0}">
              <td style="text-align: center;">
               <input type="checkbox" name="disabledflg" disabled="disabled" /></td>
            </c:if>

        </tr>
      </c:forEach>
     </tbody>
     </table>
    </div>

  • 相关阅读:
    iOS--异步下载
    linux搭建ftp服务器
    hexo常用命令
    Markdown入门
    Markdown 语法和 MWeb 写作使用说明
    vi/vim
    微信聊天机器人
    .vimrc
    配置双机
    python学习笔记(一)
  • 原文地址:https://www.cnblogs.com/ProgramerWorldOfMe/p/5149161.html
Copyright © 2011-2022 走看看