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 相关文章推荐
用javascript实现分割提取页面所需内容
May 09 Javascript
javascript 单选框,多选框美化代码
Aug 01 Javascript
JQuery给元素添加/删除节点比如select
Apr 02 Javascript
javascript实现禁止右键和F12查看源代码
Dec 26 Javascript
js使用setTimeout实现定时炸弹的方法
Apr 10 Javascript
JavaScript里实用的原生API汇总
May 14 Javascript
Bootstrap Paginator分页插件与ajax相结合实现动态无刷新分页效果
May 27 Javascript
jQuery插件zTree实现清空选中第一个节点所有子节点的方法
Mar 08 Javascript
element-ui循环显示radio控件信息的方法
Aug 24 Javascript
JS实现的贪吃蛇游戏完整实例
Jan 18 Javascript
解决vue-router 二级导航默认选中某一选项的问题
Nov 01 Javascript
jQuery实现弹幕特效
Nov 29 jQuery
屏蔽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应用技巧
2008/03/27 PHP
组合算法的PHP解答方法
2012/02/04 PHP
PHP中feof()函数实例测试
2014/08/23 PHP
php实现数组按指定KEY排序的方法
2015/03/30 PHP
Laravel 创建可以传递参数 Console服务的例子
2019/10/14 PHP
Javascript 面试题随笔
2011/03/31 Javascript
输入框的字数时时统计—关于 onpropertychange 和 oninput 使用
2011/10/21 Javascript
js实现身份证号码验证的简单实例
2014/02/19 Javascript
js实现字符串的16进制编码不加密
2014/04/25 Javascript
实例解析JS布尔对象的toString()方法和valueOf()方法
2015/10/25 Javascript
H5实现中奖记录逐行滚动切换效果
2017/03/13 Javascript
jQuery选择器之表单元素选择器详解
2017/09/19 jQuery
angular基于ng-alain定义自己的select组件示例
2018/02/23 Javascript
Node.js JSON模块用法实例分析
2019/01/04 Javascript
bootstrap table实现横向合并与纵向合并
2019/07/18 Javascript
Vue的属性、方法、生命周期实例代码详解
2019/09/17 Javascript
vue 开发企业微信整合案例分析
2019/12/02 Javascript
微信小程序实现左滑删除效果
2020/11/18 Javascript
[36:45]TNC vs VGJ.S 2018国际邀请赛小组赛BO2 第二场 8.18
2018/08/19 DOTA
Python的Flask框架中配置多个子域名的方法讲解
2016/06/07 Python
Python中static相关知识小结
2018/01/02 Python
解决python打不开文件(文件不存在)的问题
2019/02/18 Python
python中下标和切片的使用方法解析
2019/08/27 Python
Python3如何在Windows和Linux上打包
2020/02/25 Python
Python unittest单元测试框架及断言方法
2020/04/15 Python
HTML5 Canvas 旋转风车绘制
2017/08/18 HTML / CSS
苏格兰领先的多渠道鞋店:Begg Shoes
2019/10/22 全球购物
什么是WEB控件?使用WEB控件有哪些优势?
2012/01/21 面试题
毕业生就业意向书
2014/04/01 职场文书
国旗下的演讲稿
2014/05/08 职场文书
保洁公司服务承诺书
2014/05/28 职场文书
民警群众路线教育实践活动对照检查材料
2014/10/04 职场文书
家属慰问信
2015/02/14 职场文书
2019年农民幸福观调查的实践感悟
2019/12/19 职场文书
Python实现PIL图像处理库绘制国际象棋棋盘
2021/07/16 Python
动漫APP软件排行榜前十名,半次元上榜,第一款由腾讯公司推出
2022/03/18 杂记