javascript中CheckBox全选终极方案


Posted in Javascript onMay 20, 2015

在我们的程序开发中经常会要用到CheckBox的全选,通常情况下是在一些数据绑定控件中如Gridview等

下面以Repeater为例,在Repeater的header 和item中放入CheckBox控件 。

<asp:Repeater ID="rptGroup" runat="server"> 
  <HeaderTemplate> 
    <table width="100%" cellspacing="1" >
      <tr> 
        <td width="3%" align="center" >
         <input type="checkbox" id="chkAll" name="chkAll" value="checkbox" 
         onclick="checkAll  ('chkAll',this);" />             
        </td> 
      </tr> 
  </HeaderTemplate> 
  <ItemTemplate> 
    <tr> 
    <td align="center" >
     <input type="checkbox" name="chkSelect" value='<%# Eval("ID") %>' 
     onclick="checkAll('chkAll',this);"/>
    </td> 
    </tr> 
  </ItemTemplate> 
  <FooterTemplate> 
    </table> 
  </FooterTemplate> 
 </asp:Repeater>

下面就是js脚本了

checkAll方法是实现CheckBox的全选和取消全选的。

function checkAll(chkAllID, thisObj) {
  var chkAll = document.getElementById(chkAllID);
  var chks = document.getElementsByTagName("input");
  var chkNo = 0;
  var selectNo = 0;
  for (var i = 0; i < chks.length; i++) {
    if (chks[i].type == "checkbox") {
      //全选触发事件  
      if (chkAll == thisObj) {
        chks[i].checked = thisObj.checked;
      }
      //非全选触发 
      else {
        if (chks[i].checked && chks[i].id != chkAllID)
          selectNo++;
      }
      if (chks[i].id != chkAllID) {
        chkNo++;
      }
    }
  }
  if (chkAll != thisObj) {
    chkAll.checked = chkNo == selectNo;
  }
}

checkSelectNo 函数是用来获取 所有checkbox 选中的个数 这个在用来判断 是否有勾选时非常有用。

function checkSelectNo(chkAllID) {
  var chks = document.getElementsByTagName("input");
  var selectNo = 0;
  for (var i = 0; i < chks.length; i++) {
    if (chks[i].type == "checkbox") {
      if (chks[i].id != chkAllID && chks[i].checked) {
        selectNo++;
      }
    }
  }
  return selectNo;
}

以上所述就是本文的全部内容了,希望大家能够喜欢。

Javascript 相关文章推荐
jQuery 处理网页内容的实现代码
Feb 15 Javascript
自己动手制作jquery插件之自动添加删除行功能介绍
Oct 14 Javascript
js修改input的type属性及浏览器兼容问题探讨与解决
Jan 23 Javascript
D3.js 从P元素的创建开始(显示可加载数据)
Oct 30 Javascript
js时间日期格式化封装函数
Dec 02 Javascript
javascript算法题:求任意一个1-9位不重复的N位数在该组合中的大小排列序号
Apr 01 Javascript
详解 javascript中offsetleft属性的用法
Nov 11 Javascript
javascript事件委托的用法及其好处简析
Apr 04 Javascript
用js写的一个路由(简单实例)
Sep 24 Javascript
jQuery+C#实现参数RSA加密传输功能【附jsencrypt.js下载】
Jun 26 jQuery
Vue使用lodop实现打印小结
Jul 06 Javascript
el-form 多层级表单的实现示例
Sep 10 Javascript
javascript消除window.close()的提示窗口
May 20 #Javascript
在JS方法中返回多个值的方法汇总
May 20 #Javascript
AspNet中使用JQuery上传插件Uploadify详解
May 20 #Javascript
AspNet中使用JQuery boxy插件的确认框
May 20 #Javascript
JQuery boxy插件在IE中边角图片不显示问题的解决
May 20 #Javascript
JS中的Replace方法使用经验分享
May 20 #Javascript
jquery使用经验小结
May 20 #Javascript
You might like
php访问查询mysql数据的三种方法
2006/10/09 PHP
ThinkPHP开发框架函数详解:C方法
2015/08/14 PHP
php微信支付接口开发程序
2016/08/02 PHP
php+webSoket实现聊天室示例代码(附源码)
2017/02/17 PHP
PHP基于双向链表与排序操作实现的会员排名功能示例
2017/12/26 PHP
JS控制显示隐藏兼容问题(IE6、IE7、IE8)
2010/04/01 Javascript
处理及遍历XML文档DOM元素属性及方法整理
2013/08/23 Javascript
Jquery实现地铁线路指示灯提示牌效果的方法
2015/03/02 Javascript
TypeOf这些知识点你了解吗
2016/02/21 Javascript
JavaScript知识点总结(六)之JavaScript判断变量数据类型
2016/05/31 Javascript
bootstrap手风琴制作方法详解
2017/01/11 Javascript
JS实现的文字间歇循环滚动效果完整示例
2018/02/13 Javascript
vue.js-div滚动条隐藏但有滚动效果的实现方法
2018/03/03 Javascript
微信小程序表单弹窗实例
2018/07/19 Javascript
vant(ZanUi)结合async-validator实现表单验证的方法
2018/12/06 Javascript
vue中typescript装饰器的使用方法超实用教程
2019/06/17 Javascript
浅谈javascript错误处理
2019/08/11 Javascript
[01:01:01]完美世界DOTA2联赛循环赛 GXR vs FTD BO2第一场 10.29
2020/10/29 DOTA
python监控网卡流量并使用graphite绘图的示例
2014/04/27 Python
高效测试用例组织算法pairwise之Python实现方法
2017/07/19 Python
使用pandas模块读取csv文件和excel表格,并用matplotlib画图的方法
2018/06/22 Python
Python 隐藏输入密码时屏幕回显的实例
2019/02/19 Python
详解Python正则表达式re模块
2019/03/19 Python
简单的Python调度器Schedule详解
2019/08/30 Python
Python3.x+迅雷x 自动下载高分电影的实现方法
2020/01/12 Python
CSS3 3D位移translate效果实例介绍
2016/05/03 HTML / CSS
HTML5实现移动端点击翻牌功能
2020/10/23 HTML / CSS
Roxy美国官网:澳大利亚冲浪、滑雪健身品牌
2016/07/30 全球购物
大韩航空官方网站:Korean Air
2017/10/25 全球购物
波兰购物网站:MALL.PL
2019/05/01 全球购物
自1926年以来就为冰岛保持温暖:66°North
2020/11/27 全球购物
介绍一下RMI的基本概念
2016/12/17 面试题
蔬菜基地的创业计划书
2014/01/06 职场文书
体育系毕业生自荐信
2014/06/28 职场文书
2016年教师党员承诺书范文
2016/03/24 职场文书
vue递归实现树形组件
2022/07/15 Vue.js