源码网商城,靠谱的源码在线交易网站 我的订单 购物车 帮助

源码网商城

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

  • 时间:2022-07-15 00:13 编辑: 来源: 阅读:
  • 扫一扫,手机访问
摘要:jquery实现checkbox全选全不选的简单实例
[b]demo一: [/b]
[u]复制代码[/u] 代码如下:
<%@ 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>
[b]demo二: [/b]
[u]复制代码[/u] 代码如下:
<script src="jquery-1.6.2.min.js"></script> <input type="checkbox" id="ckAll" />check all<br /> <input type="checkbox" name="sub" />1<br /> <input type="checkbox" name="sub"/>2<br /> <input type="checkbox" name="sub"/>3<br /> <input type="checkbox" name="sub"/>4<br /> <script>   $("#ckAll").click(function() {     $("input[name='sub']").prop("checked", this.checked);   });   $("input[name='sub']").click(function() {     var $subs = $("input[name='sub']");     $("#ckAll").prop("checked" , $subs.length == $subs.filter(":checked").length ? true :false);   }); </script>
  • 全部评论(0)
联系客服
客服电话:
400-000-3129
微信版

扫一扫进微信版
返回顶部