javascript中CheckBox全选终极方案

 更新时间:2015年05月20日 11:14:28   投稿:hebedich  
在javascript页面中实现CheckBox或者Radio的选中状态是一件很容易的事情,下面我们来给大家展示下在asp.net中使用javascript中CheckBox全选终极方案,有需要的小伙伴可以参考下。

在我们的程序开发中经常会要用到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中清空数组的方法总结

    JavaScript中清空数组的方法总结

    本文给大家总结了三种js清空数组的方法,每种方法都与众不同,非常不错,具有参考借鉴价值,感兴趣的朋友一起看看吧
    2016-12-12
  • JavaScript数组特性与实践应用深入详解

    JavaScript数组特性与实践应用深入详解

    这篇文章主要介绍了JavaScript数组特性与实践应用,较为深入而详细的分析了javascript数组的功能、属性、使用方法及操作注意事项,需要的朋友可以参考下
    2018-12-12
  • javaScript实现滚动条事件详解

    javaScript实现滚动条事件详解

    这篇文章主要为大家详细介绍了javaScript实现滚动条事件的相关资料,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2017-09-09
  • js与jquery正则验证电子邮箱、手机号、邮政编码的方法

    js与jquery正则验证电子邮箱、手机号、邮政编码的方法

    这篇文章主要介绍了js与jquery正则验证电子邮箱、手机号、邮政编码的方法,涉及javascript与jQuery鼠标事件的响应与正则验证操作字符串的相关技巧,需要的朋友可以参考下
    2016-07-07
  • JavaScript中关于base64的一些事

    JavaScript中关于base64的一些事

    base64 其实是一种编码转换方式, 将 ASCII 字符转换成普通文本, 是网络上最常见的用于传输8Bit字节代码的编码方式之一。这篇文章重点给大家介绍JavaScript中关于base64的一些事,感兴趣的朋友跟随小编一起看看吧
    2019-05-05
  • 不同Jquery版本引发的问题解决

    不同Jquery版本引发的问题解决

    用JS实现了一个拖拽排序,可因Jquery版本不同导致浏览器访问时存在很多的问题,下面为大家介绍下具体的解决方法,感兴趣的朋友可以参考下
    2013-10-10
  • 微信小程序学习(4)-系统配置app.json详解

    微信小程序学习(4)-系统配置app.json详解

    我们使用app.json文件来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
    2017-01-01
  • Javascript的动态增加类的实现方法

    Javascript的动态增加类的实现方法

    下面小编就为大家带来一篇Javascript的动态增加类的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2016-10-10
  • 微信小程序接入腾讯云验证码的方法步骤

    微信小程序接入腾讯云验证码的方法步骤

    这篇文章主要介绍了微信小程序接入腾讯云验证码的方法步骤,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01
  • 低代码从0到1创建小程序项目详解流程

    低代码从0到1创建小程序项目详解流程

    低代码作为开发工具类的产品,需要有从0到1体系化的教程才可以,而且还得有教师进行辅助。否则,学习低代码是有难度的,入门很难。因为大家习惯了用代码编程,一下子过度到可视化编程,有一个思路上的转变
    2022-08-08

最新评论