首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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>

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

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
HTTP状态代码以及定义（解释）
Feb 02 Javascript
ajax 文件上传应用简单实现
Mar 03 Javascript
用Juery网页选项卡实现代码
Jun 13 Javascript
js 操作select与option(示例讲解)
Dec 20 Javascript
Enter回车切换输入焦点实现思路与代码兼容各大浏览器
Sep 01 Javascript
浅析javascript操作 cookie对象
Dec 26 Javascript
jquery超简单实现手风琴效果的方法
Jun 05 Javascript
prototype框架中美元符号$用法分析
Jan 22 Javascript
AngularJS ng-bind 指令简单实现
Jul 30 Javascript
浅析script标签中的defer与async属性
Nov 30 Javascript
Vue.js实现移动端短信验证码功能
Mar 29 Javascript
JS实现动态无缝轮播
Jan 11 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
vuex(1) OutputStream(1) Vue(10) InputStream(1) Vue3(1) HashSet集合(1) Set接口(1) persistedstate(1) axios(1) 高动态范围(1)
You might like
php中截取中文字符串的代码小结
2011/07/17 PHP
ThinkPHP公共配置文件与各自项目中配置文件组合的方法
2014/11/24 PHP
基于php的微信公众平台开发入门实例
2015/04/15 PHP
PHP实现生成带背景的图形验证码功能
2016/10/03 PHP
用js实现计算代码行数的简单方法附代码
2007/08/13 Javascript
基于jQuery的自动完成插件
2011/02/03 Javascript
setTimeout和setInterval的区别你真的了解吗?
2011/03/31 Javascript
当jQuery1.7遇上focus方法的问题
2014/01/26 Javascript
javascript搜索框效果实现方法
2015/05/14 Javascript
开启BootStrap学习之旅
2016/05/04 Javascript
原生js实现对Ajax的封装(仿jquery)
2017/01/22 Javascript
AngularJS ui-router (嵌套路由)实例
2017/03/10 Javascript
Angular移动端页面input无法输入的解决方法
2017/11/14 Javascript
关于微信小程序bug记录与解决方法
2018/08/15 Javascript
在vue中使用setInterval的方法示例
2019/04/16 Javascript
详解iview的checkbox多选框全选时校验问题
2019/06/10 Javascript
解决layui弹出层layer的area过大被遮挡的问题
2019/09/21 Javascript
[43:48]Ti4正赛第一天 VG vs NEWBEE 2
2014/07/19 DOTA
python实现支付宝转账接口
2019/05/07 Python
python读写配置文件操作示例
2019/07/03 Python
python实现爬虫抓取小说功能示例【抓取金庸小说】
2019/08/09 Python
解决Python 写文件报错TypeError的问题
2020/10/23 Python
python 实现图片裁剪小工具
2021/02/02 Python
CSS3盒子模型详解
2013/04/24 HTML / CSS
HTML5 图片悬停放大的实现代码示例
2019/12/04 HTML / CSS
德国骆驼商店：ActiveFashionWorld
2017/11/18 全球购物
英国最大的香水商店：The Fragrance Shop
2018/07/06 全球购物
POS解决方案：MUNBYN（热敏打印机、条形码扫描仪）
2020/06/09 全球购物
外科实习自我鉴定
2013/10/06 职场文书
总经理职责范文
2013/11/08 职场文书
小学红领巾中秋节广播稿
2014/01/13 职场文书
先进个人事迹材料
2014/01/25 职场文书
闪闪红星观后感
2015/06/08 职场文书
2015年高中语文教学总结
2015/08/18 职场文书
经销商会议开幕词
2016/03/04 职场文书
市场营销计划书
2019/04/24 职场文书