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 相关文章推荐
js客户端快捷键管理类的较完整实现和应用
Jun 08 Javascript
javascript 弹出层组件(升级版)
May 12 Javascript
JQuery中判断一个元素下面是否有内容或者有某个标签的判断代码
Feb 02 Javascript
jquery插件制作 提示框插件实现代码
Aug 17 Javascript
JavaScript之IE的fireEvent方法详细解析
Nov 20 Javascript
iScroll.js 使用方法参考
May 16 Javascript
Bootstrap3学习笔记(三)之表格
May 20 Javascript
JavaScript面试开发常用的知识点总结
Aug 08 Javascript
详谈js遍历集合(Array,Map,Set)
Apr 06 Javascript
layui实现文件或图片上传记录
Aug 28 Javascript
vue插槽slot的理解和使用方法
Apr 03 Javascript
读懂CommonJS的模块加载
Apr 19 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
flash用php连接数据库的代码
2011/04/21 PHP
php生成zip压缩文件的方法详解
2013/06/09 PHP
浅析PHP的静态成员函数效率更高的原因
2014/06/13 PHP
php实现的Curl封装类Curl.class.php用法实例分析
2015/09/25 PHP
JavaScript中的isXX系列是否继续使用的分析
2011/04/16 Javascript
js导出table数据到excel即导出为EXCEL文档的方法
2013/10/10 Javascript
JavaScript实现Flash炫光波动特效
2015/05/14 Javascript
解析JavaScript的ES6版本中的解构赋值
2015/07/28 Javascript
JS实现图片平面旋转的方法
2016/03/01 Javascript
JavaScript手机振动API
2016/06/11 Javascript
Bootstrap Multiselect 常用组件实现代码
2017/07/09 Javascript
深入浅析JavaScript中的RegExp对象
2017/09/18 Javascript
jQuery代码优化方法总结
2018/01/29 jQuery
vue2.0使用swiper组件实现轮播的示例代码
2018/03/03 Javascript
记录一次完整的react hooks实践
2019/03/11 Javascript
js实现九宫格抽奖
2020/03/19 Javascript
Vue+Java 通过websocket实现服务器与客户端双向通信操作
2020/09/22 Javascript
python如何通过protobuf实现rpc
2016/03/06 Python
Python设计足球联赛赛程表程序的思路与简单实现示例
2016/06/28 Python
Python使用迭代器捕获Generator返回值的方法
2017/04/05 Python
Python实现的对一个数进行因式分解操作示例
2019/06/27 Python
Python中的延迟绑定原理详解
2019/10/11 Python
Python3爬虫中关于Ajax分析方法的总结
2020/07/10 Python
Css3新特性应用之形状总结
2016/12/08 HTML / CSS
StubHub墨西哥:购买和出售您的门票
2016/09/17 全球购物
在家更换处方镜片:Lensabl
2019/05/01 全球购物
Ibatis如何调用存储过程
2015/05/15 面试题
如何提高MySql的安全性
2014/06/19 面试题
网络工程系信息安全技术专业大学生求职信
2013/10/22 职场文书
公司业务员岗位职责
2014/03/18 职场文书
弘扬职业精神演讲稿
2014/03/20 职场文书
讲解员培训方案
2014/05/04 职场文书
手术室护士节演讲稿
2014/08/27 职场文书
简易离婚协议书范本
2014/10/24 职场文书
Nginx反向代理多个服务器的实现方法
2021/03/31 Servers
教你一步步实现一个简易promise
2021/11/02 Javascript