jquery实现checkbox全选全不选的简单实例

前端技术 2023/09/03 JavaScript

demo一：

复制代码 代码如下:

<%@ page language=\"java\" pageEncoding=\"UTF-8\"%>
<%@ taglib prefix=\"s\" uri=\"/struts-tags\" %>
<%@ taglib prefix=\"c\" uri=\"http://java.sun.com/jsp/jstl/core\" %>
<%@ taglib prefix=\"fn\" uri=\"http://java.sun.com/jsp/jstl/functions\"%>
<%@ taglib prefix=\"fmt\" uri=\"http://java.sun.com/jstl/fmt\" %>
<%@ taglib uri=\"/WEB-INF/tlds/test.tld\" prefix=\"pig\"%>
<%
 String path = request.getContextPath();
 String basePath = request.getScheme() + \"://\" + request.getServerName() + \":\" + request.getServerPort()+ path;
%>
<!DOCTYPE html PUBLIC \"-//W3C//DTD XHTML 1.0 Transitional//EN\" \"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd\">
<html xmlns=\"http://www.w3.org/1999/xhtml\">
<head>
    <title></title>
      <script type=\"text/javascript\" src=\"<%=path %>/scripts/jquery.js\"></script>
 <script type=\"text/javascript\">
  function checkSubmit() {

   document.Search.submit();
  }


  function fnull(){
   var obj = document.getElementById(\"goPage\");
     var index = obj.selectedIndex; // 选中索引
     var text = obj.options[index].text; // 选中文本
     var go = obj.options[index].value; // 选中值

   //alert(go);
         gopage(go);
   }

     function gopage(page){
      var numberpg=document.getElementById(\"numberpg\").value;
      document.getElementById(\"prepage\").value=numberpg;
      document.getElementById(\"currPage\").value=page;
      checkSubmit();
     }

     function px(){
      var numberpg=document.getElementById(\"numberpg\").value;
      gopage(1);
     }
     function driction(id){
   document.s_result_form1.s_result_form1_id.value = id; 
   document.s_result_form1.submit();
  }

  $(function(){

   $(\"td\").css(\"height\",\"22px\");

   $(\"#refresh\").bind(\"click\",function(){
    //location.reload();
    location=\"wlan!querySurveyWlan.do\";
   });

   $(\".dg_alternatingitemstyle\").bind(\"mouseover\",function(){
    $(this).children().css(\"height\",\"22px\"); 
   });

   $(\".dg_alternatingitemstyle\").bind(\"mouseout\",function(){
    $(this).children().css(\"height\",\"22px\"); 
   });
  });
 </script>
<style type=\"text/css\">
<!--
.f {
 font-size: 12px;
}
-->
</style>
</head>
<body id=\"master\">

    <div id=\"mainareacontent\">
        <div class=\"mainarea\">
            <div class=\"dataarea\">        
    <table width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" class=\"title\">
                        <tr>
                            <th width=\"1268\">
                              <span>WLAN调查管理</span>                           
                            </th>
                            <td width=\"26\" class=\"null\">
                             <input type=\"image\" name=\"import\" src=\"<%=path %>/themes/default/btn_sc.gif\" onclick=\"deletes()\" alt = \"勾选批量删除\"/>
                            </td>
                            <td width=\"16\" class=\"null\" align=\"center\">
                             <input type=\"image\" name=\"export\" src=\"<%=path %>/themes/default/btn_exp.gif\"
onclick=\"window.location = \'wlan!hotExport.do\'\" alt = \"导出\"/>
                            </td>
                            <td width=\"16\" class=\"null\">
                             <img id=\"refresh\" src=\"<%=path %>/themes/default/btn_sx.gif\" width=\"50\" height=\"20\" alt = \"刷新\"/>
                            </td>
                        </tr>
               </table>
  <!----------- 数据列表 ------------------>
    <div class=\"datagrid\"> 
     <div class=\"search\" style=\"margin-top:0px;\">
                   <form action=\"wlan!querySurveyWlan.do\" method=\"post\" onsubmit=\"return false;\"

name=\"Search\" id=\"Search\">
                    <table cellpadding=\"0\" cellspacing=\"0\" width=\"97%\">
                       <tr>
                       <td>记录日期：</td>
                          <td><input type=\"text\" name=\"msgDate\" id=\"msgDate\" value=\"${msgDate}\"/></td>
                        <td>热点类型：</td>
                          <td>
                           <s:select list=\"typeMap\" name=\"msgType\" value=\"msgType\" theme=\"simple\"/>
                           </td>                                                  
                          <td>上网类型：</td> 
                          <td>
                           <s:select list=\"areaMap\" name=\"msgOnlineType\" value=\"msgOnlineType\" theme=\"simple\"/>                      
                          </td>                     
                       </tr>
                       <tr>
                        <td>手机号码：</td>
         <td>
          <input type=\"text\" name=\"msgMobileno\" id=\"msgMobileno\" value=\"${msgMobileno}\"/>
         </td>
                        <td>地址建议：</td>
                           <td>
                            <input type=\"text\" name=\"msgAddress\" id=\"msgAddress\" value=\"${msgAddress}\"/>
                           </td> 
                           <td style=\"text-align:left\" colspan=\"2\"><img style=\"width:50; height:20;
border:0; cursor: pointer;\" onclick=\"checkSubmit()\" src=\"<%=path %>/themes/default/btn_search.gif\" /></td>         
                       </tr>                      
                     </table>
                     <input type=\"hidden\" name=\"prepage\" id=\"prepage\" value=\"${prepage}\"/>
                        <input type=\"hidden\" name=\"currPage\" id=\"currPage\" value=\"${currPage}\"/>
                     </form>
       </div>

        <table id=\"list\" width=\"100%\" cellpadding=\"0\" cellspacing=\"0\" class=\"dg_borderstyle\" border=\"1\" bordercolor=\"#1C568A\">
                <tr>
                 <th width=\"3%\" style=\"background-color:#9FBFE3\"><div align=\"center\" title=\"全选/全不选\"><input id=\"allSelect\" name=\"allSelect\" type=\"checkbox\" onclick=\"selectAll()\" title=\"全选/全不选\"/></div></th>                
                 <th width=\"10%\" style=\"background-color:#9FBFE3\"><div align=\"center\">记录日期</div></th>
                  <th width=\"10%\" style=\"background-color:#9FBFE3\"><div align=\"center\">热点类型</div></th>
                 <th width=\"13%\" style=\"background-color:#9FBFE3\"><div align=\"center\">上网类型</div></th>
                  <th width=\"12%\" style=\"background-color:#9FBFE3\"><div align=\"center\">手机号码</div></th>
                  <th width=\"12%\" style=\"background-color:#9FBFE3\"><div align=\"center\">地址建议</div></th>                  
                </tr>
                <s:iterator value=\"surveyList\" id=\"dto\" status=\"sta\">
                       <tr onMouseOver=\"MOver(this)\" onMouseOut=\"Mout(this)\" class=\"dg_alternatingitemstyle\">                       
                         <td align=\"center\" class=\"f\">
                          <c:choose>
                           <c:when test=\"1==1\">
                            <input id=\"ck\" name=\"ck\" type=\"checkbox\" onclick=\"cancelCKSelect()\" disabled=\"disabled\"/>
                           </c:when>
                           <c:otherwise>
                            <input id=\"ck\" name=\"ck\" type=\"checkbox\" onclick=\"cancelCKSelect()\"/>
                           </c:otherwise>
                          </c:choose>                          
                          <input id=\"ckvalue${sta.count-1}\" name=\"ckvalue${sta.count-1}\" type=\"hidden\" value=\"${dto.id}\"/>
                         </td>
                          <td align=\"center\" class=\"f\">
                          ${dto.recmakedate}
                         </td>
                         <td align=\"center\" class=\"f\">
                          ${dto.type}
                         </td>
                         <td align=\"center\" class=\"f\">
                          ${dto.onlinetype}
                         </td>
                         <td align=\"center\" class=\"f\">
                          ${dto.mobileno}
                         </td>
                         <td align=\"center\" class=\"f\">
                          ${dto.address}
                         </td>               
                       </tr>
                     </s:iterator>
              </table>
              <s:if test=\"surveyList.size>0\">
              <table width=\"98%\" cellpadding=\"0\" cellspacing=\"0\" class=\"dg_pagestyle\">
                  <tr>
                   <th>第${currPage}页 | 共${countPage}页/${countNum}条记录</th>
                      <td>每页 
                          <select id=\"numberpg\" name=\"numberpg\" onChange=\"px(this.options

[this.selectedIndex].value)\">
                              <option <c:if test=\"${prepage==100}\">selected=\"selected\"</c:if>

value=\"100\">100</option>
                              <option <c:if test=\"${prepage==300}\">selected=\"selected\"</c:if>

value=\"300\">300</option>
                              <option <c:if test=\"${prepage==500}\">selected=\"selected\"</c:if>

value=\"500\">500</option>
                          </select>
                                                                条记录 | 第
<select name=\"goPage\" id=\"goPage\">
 <s:iterator begin=\"1\" end=\"countPage\" status=\"stu\">
  <c:choose>
   <c:when test=\"${stu.count==currPage}\"><option value=\'${stu.count}\' selected=\'selected\'>${stu.count}</option></c:when>
   <c:otherwise>
    <option value=\"${stu.count}\">${stu.count}</option>
   </c:otherwise>
  </c:choose>
 </s:iterator>
</select>
                   <!-- <input type=\"text\" style=\"width:25px;\" id=\"goPage\" value=\"${currPage}\" onkeydown=\"if(event.keyCode==13){fnull();return false;}\" style=\"IME-MODE: disabled; WIDTH: 60px; HEIGHT: 15px\" onkeyup=\"this.value=this.value.replace(/\\D/g,\'\')\"  onafterpaste=\"this.value=this.value.replace(/\\D/g,\'\')\" />-->  页
                 <a onClick=\"fnull()\" id=\"go\" style=\"text-decoration:none;\" >
                 <img border=\"0\" src=\"<%=path %>/themes/default/btn_go.gif\" />
                 </a>
                 <a  style=\"text-decoration:none;\" onClick=\"gopage(1)\">
                 <img border=\"0\" src=\'<%=path %>/themes/default/btn_sy.gif\'/>
                 </a>
                 <c:if test=\"${currPage!=1}\">
            <a  style=\"text-decoration:none;\" onClick=\"gopage(${currPage-1})\" >
                 <img border=\"0\" src=\'<%=path %>/themes/default/btn_syy.gif\'/>
                 </a>
                 </c:if>
                 <c:if test=\"${currPage!=countPage}\">
                  <a style=\"text-decoration:none;\" onClick=\"gopage(${currPage+1})\">
                  <img border=\"0\" src=\'<%=path %>/themes/default/btn_xyy.gif\'/>
                  </a>
                 </c:if>
                 <a style=\"text-decoration:none;\" onClick=\"gopage(${countPage})\">
                 <img border=\"0\" src=\'<%=path %>/themes/default/btn_wy.gif\'/>
                 </a> 
                      </td>   
                  </tr>
              </table>
               </s:if>
                  <s:else>
                   <center>当前查询没有数据！</center>
                  </s:else>
               </div>
    </div>
        </div>
    </div>
</body>
</html>
<script>

$(function(){

});

function selectAll(){
 var ck = $(\"input[name=ck]\");
 var currSelect = $(\"input[name=allSelect][checked]\").val();

 $.each(ck,function(i){
  //alert(ck[i].disabled)
  if(!ck[i].disabled){
   ck[i].checked = currSelect;
  }

 });
}

function cancelCKSelect(){
 var ck = $(\"input[name=ck]\");
 var r = true;
 $.each(ck,function(i){
  if(!ck[i].checked && !ck[i].disabled){
   r=false;
   return false;
  }
 });
 $(\'#allSelect\').attr(\'checked\', r);
}

function deletes(){
 var delId =\"\";
 var ck = $(\"input[name=ck]\");

 $.each(ck,function(i){
  if(ck[i].checked && !ck[i].disabled){
   delId += \"\'\"+$(\"#ckvalue\"+i).val()+\"\',\";
  } 
 });
 delId = delId.substring(0,delId.lastIndexOf(\",\"));
 if(delId != \"\"){
  var flag = window.confirm(\"您确定删除吗?\");
  if(!flag){
   return;
  }
  window.location= \"wlan!hotDelete.do?hotWlanId=\"+delId;
 }else{
  alert(\'请选择需要删除的数据！\');
 }
}
</script>

本文地址：https://www.stayed.cn/item/8764

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案