首页
所有分类
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 相关文章推荐
跟着JQuery API学Jquery 之三 筛选
Apr 09 Javascript
jquery实现的网页自动播放声音
Apr 30 Javascript
node.js中的fs.lstat方法使用说明
Dec 16 Javascript
jQuery scrollFix滚动定位插件
Apr 01 Javascript
JQuery实现的按钮倒计时效果
Dec 23 Javascript
jQuery简单获取键盘事件的方法
Jan 22 Javascript
jQuery获取字符串中出现最多的数
Feb 22 Javascript
Node.js中的http请求客户端示例(request client)
May 04 Javascript
微信小程序上传图片功能（附后端代码）
Jun 19 Javascript
Vue2.0实现组件之间数据交互和通信操作示例
May 16 Javascript
react中Suspense的使用详解
Sep 01 Javascript
vue el-upload上传文件的示例代码
Dec 21 Vue.js
屏蔽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
SRF-S83(1) 森海(1) PL660(1) MX500(1) 台湾(1) S2000(3) 直流胆(1) 南麂列岛(1) YB400(2) YB235(1)
You might like
MySQL中create table语句的基本语法是
2007/01/15 PHP
C#使用PHP服务端的Web Service通信实例
2014/04/08 PHP
PHPMailer发送邮件
2016/12/28 PHP
Firebug入门指南(Firefox浏览器)
2010/08/21 Javascript
JavaScript基础篇之变量作用域、传值、传址的简单介绍与实例
2013/06/29 Javascript
js 判断上传文件大小及格式代码
2013/11/13 Javascript
用javascript删除当前行,添加行(示例代码)
2013/11/25 Javascript
jquery插件hiAlert实现网页对话框美化
2015/05/03 Javascript
在JS方法中返回多个值的方法汇总
2015/05/20 Javascript
JavaScript设置表单上传时文件个数的方法
2015/08/11 Javascript
JS实现带有抽屉效果的产品类网站多级导航菜单代码
2015/09/15 Javascript
Extjs4.0 ComboBox如何实现三级联动
2016/05/11 Javascript
封装获取dom元素的简单实例
2016/07/08 Javascript
Vue结合原生js实现自定义组件自动生成示例
2017/01/21 Javascript
Vue过滤器的用法和自定义过滤器使用
2017/02/08 Javascript
JavaScript html5利用FileReader实现上传功能
2020/03/27 Javascript
vue.js动态数据绑定学习笔记
2017/05/19 Javascript
Vue项目webpack打包部署到服务器的实例详解
2017/07/17 Javascript
浅谈sass在vue注意的地方
2017/08/10 Javascript
删除table表格行的实例讲解
2017/09/21 Javascript
手写简单的jQuery雪花飘落效果实例
2018/04/22 jQuery
微信小程序 MinUI组件库系列之badge徽章组件示例
2018/08/20 Javascript
[02:17]快乐加倍！DOTA2食人魔魔法师至宝＋迎霜节活动上线
2019/12/22 DOTA
使用Python脚本将文字转换为图片的实例分享
2015/08/29 Python
python3.4用函数操作mysql5.7数据库
2017/06/23 Python
python的继承知识点总结
2018/12/10 Python
基于python3 pyQt5 QtDesignner实现窗口化猜数字游戏功能
2019/07/15 Python
python Django框架实现web端分页呈现数据
2019/10/31 Python
使用python3批量下载rbsp数据的示例代码
2019/12/20 Python
篮球比赛策划方案
2014/06/05 职场文书
奥林匹克运动会口号
2014/06/19 职场文书
入党积极分子批评与自我批评思想汇报
2014/09/14 职场文书
淘宝好评语句大全
2014/12/31 职场文书
2015年保险业务员工作总结
2015/05/27 职场文书
Python中常见的反爬机制及其破解方法总结
2021/06/10 Python
Springboot如何使用logback实现多环境配置?
2021/06/16 Java/Android