欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2022-06-29 23:29:40
demo一: . 代码如下: <%@ page language="java" pageencoding="utf-8"%&g...

demo一:

. 代码如下:


<%@ page language="java" pageencoding="utf-8"%>
<%@ taglib prefix="s" uri="/struts-tags" %>
<%@ taglib prefix="c" uri="http://java.sun.com//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("mouver",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">

    <p id="mainareacontent">
        <p class="mainarea">
            <p 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>
        &nnbsp;                   <td width="16" class="null">
                             <img id="refresh" src="<%=path %>/themes/default/btn_sx.gif" width="50" height="20" alt = "刷新"/>
                            </td>
                        </tr>
               </table>
  <!----------- 数据列表 ------------------>
    <p class="datagrid"> 
     <p 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>
       </p>

        <table id="list" width="100%" cellpadding="0" cellspacing="0" class="dg_borderstyle" border="1" bordercolor="#1c568a">
                <tr>
                 <th width="3%" style="background-color:#9fbfe3"><p align="center" title="全选/全不选"><input id="allselect" name="allselect" type="checkbox" onclick="selectall()" title="全选/全不选"/></p></th>                
                 <th width="10%" style="background-color:#9fbfe3"><p align="center">记录日期</p></th>
                  <th width="10%" style="background-color:#9fbfe3"><p align="center">热点类型</p></th>
                 <th width="13%" style="background-color:#9fbfe3"><p align="center">上网类型</p></th>
                  <th width="12%" style="background-color:#9fbfe3"><p align="center">手机号码</p></th>
                  <th width="12%" style="background-color:#9fbfe3"><p align="center">地址建议</p></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>
               </p>
    </p>
        </p>
    </p>
</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>


demo二:

. 代码如下:


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