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


Posted in Javascript onDecember 31, 2013

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>

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>
Javascript 相关文章推荐
jquery 插件学习(二)
Aug 06 Javascript
jquery的ajax跨域请求原理和示例
May 08 Javascript
javascript使用prototype完成单继承
Dec 24 Javascript
H5手机端多文件上传预览插件
Apr 21 Javascript
jQuery回调方法使用示例
Jun 26 jQuery
JS实现问卷星自动填问卷脚本并在两秒自动提交功能
Jun 17 Javascript
详解angularjs实现echart图表效果最简洁教程
Nov 29 Javascript
一步步教会你微信小程序的登录鉴权
Apr 09 Javascript
vue 做移动端微信公众号采坑经验记录
Apr 26 Javascript
基于Koa2写个脚手架模拟接口服务的方法
Nov 27 Javascript
node实现生成带参数的小程序二维码并保存到本地功能示例
Dec 05 Javascript
layui radio点击事件实现input显示和隐藏的例子
Sep 02 Javascript
屏蔽IE弹出&quot;您查看的网页正在试图关闭窗口,是否关闭此窗口&quot;的方法
Dec 31 #Javascript
JavaScript的常见兼容问题及相关解决方法(chrome/IE/firefox)
Dec 31 #Javascript
IE与FireFox的JavaScript兼容问题解决办法
Dec 31 #Javascript
jquery遍历select元素(实例讲解)
Dec 31 #Javascript
在页面上用action传递参数到后台出现乱码的解决方法
Dec 31 #Javascript
获取鼠标在div中的相对位置的实现代码
Dec 30 #Javascript
input链接页面、打开新网页等等的具体实现
Dec 30 #Javascript
You might like
PHP获取服务器端信息的方法
2014/11/28 PHP
PHP单态模式简单用法示例
2016/11/16 PHP
php array_values 返回数组的值实例详解
2016/11/17 PHP
PHP APP微信提现接口代码
2018/09/30 PHP
laravel 框架配置404等异常页面
2019/01/07 PHP
网页中实现浏览器的最大,最小化和关闭按钮
2007/03/12 Javascript
jquery的$getjson调用并获取远程的JSON字符串问题
2012/12/10 Javascript
使用jquery实现图文切换效果另加特效
2013/01/20 Javascript
jQuery实现下拉框选择图片功能实例
2015/08/08 Javascript
bootstrap使用validate实现简单校验功能
2016/12/02 Javascript
从对象列表中获取一个对象的方法,依据关键字和值
2017/09/20 Javascript
js实现把时间戳转换为yyyy-MM-dd hh:mm 格式(es6语法)
2017/12/28 Javascript
VUE注册全局组件和局部组件过程解析
2019/10/10 Javascript
vue flex 布局实现div均分自动换行的示例代码
2020/08/05 Javascript
微信小程序实现身份证取景框拍摄
2020/09/09 Javascript
python zip文件 压缩
2008/12/24 Python
python 函数传参之传值还是传引用的分析
2017/09/07 Python
对Pyhon实现静态变量全局变量的方法详解
2019/01/11 Python
Python字符串逆序的实现方法【一题多解】
2019/02/18 Python
python pandas获取csv指定行 列的操作方法
2019/07/12 Python
详解pycharm连接不上mysql数据库的解决办法
2020/01/10 Python
关于torch.optim的灵活使用详解(包括重写SGD,加上L1正则)
2020/02/20 Python
浅谈python opencv对图像颜色通道进行加减操作溢出
2020/06/03 Python
CSS3用@font-face实现自定义英文字体
2013/09/23 HTML / CSS
俄罗斯鲜花递送:AMF
2020/04/24 全球购物
Python里面如何拷贝一个对象
2014/02/17 面试题
数学专业毕业生自荐信
2013/11/10 职场文书
个人实习生的自我评价
2014/02/16 职场文书
语文高效课堂实施方案
2014/05/03 职场文书
党员个人剖析材料
2014/09/30 职场文书
群众路线表态发言材料
2014/10/17 职场文书
医生辞职信范文
2015/03/02 职场文书
签字仪式主持词
2015/07/03 职场文书
天气温馨提示语
2015/07/14 职场文书
python-for x in range的用法(注意要点、细节)
2021/05/10 Python
springmvc直接不经过controller访问WEB-INF中的页面问题
2022/02/24 Java/Android