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;
} 

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

相关文章

  • 一文详细分析前端请求中的“Unsupported Media Type”问题

    一文详细分析前端请求中的“Unsupported Media Type”问题

    在Web开发中,前后端交互频繁遇到HTTP状态码415错误,这表明服务器无法处理因Content-Type不匹配的请求,常见于POST或PUT请求,必须确保请求头中的Content-Type与服务器期望的一致,跨域请求中,需要的朋友可以参考下
    2024-10-10
  • 原生js开发的日历插件

    原生js开发的日历插件

    本文主要分享了原生js开发的日历插件的示例代码。具有很好的参考价值,下面跟着小编一起来看下吧
    2017-02-02
  • 浅析JavaScript中变量提升的原理与使用

    浅析JavaScript中变量提升的原理与使用

    前端的小伙伴大概都知道,js中的var变量存在变量提升,在es6以后随着let变量的出现,变量提升问题得以解决,那么变量提升的原理是什么,es6又是怎么解决变量提升问题的,下面我们来共同探寻答案
    2023-05-05
  • 基于JavaScript开发一个有趣的分组抽签小程序

    基于JavaScript开发一个有趣的分组抽签小程序

    在团队合作开发中,经常需要将团队成员分组,来完成各自的任务,而抽签的方式自然是最公平、最简单的方法之一,所以本文就来开发一个有趣的分组抽签小程序吧
    2023-05-05
  • 深入理解在JS中通过四种设置事件处理程序的方法

    深入理解在JS中通过四种设置事件处理程序的方法

    所有的JavaScript事件处理程序的作用域是在其定义时的作用域而非调用时的作用域中执行,并且它们能存取那个作用域中的任何一个本地变量。但是HTML标签属性注册处理程序就是一个例外。看下面四种方式
    2017-03-03
  • 在js代码拼接dom对象到页面上的模板总结

    在js代码拼接dom对象到页面上的模板总结

    今天小编就为大家分享一篇关于在js代码拼接dom对象到页面上的模板总结,小编觉得内容挺不错的,现在分享给大家,具有很好的参考价值,需要的朋友一起跟随小编来看看吧
    2018-10-10
  • 详谈js模块化规范

    详谈js模块化规范

    下面小编就为大家带来一篇详谈js模块化规范。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-07-07
  • 微信小程序开发的四十个技术窍门总结(推荐)

    微信小程序开发的四十个技术窍门总结(推荐)

    这篇文章主要给大家介绍了微信小程序开发的四十个技术窍门的相关资料,相信对大家的学习或者使用微信小程序具有一定的参考借鉴价值,所以特别推荐给大家,需要的朋友们可以一起来看看吧。
    2017-01-01
  • 用JavaScript和jQuery实现瀑布流

    用JavaScript和jQuery实现瀑布流

    本篇文章主要介绍了用JavaScript和jQuery实现瀑布流的方法,具有很好的参考价值。下面跟着小编一起来看下吧
    2017-03-03
  • 在JavaScript中call()与apply()区别

    在JavaScript中call()与apply()区别

    这篇文章主要介绍了在JavaScript中call()与apply()区别 的相关资料,需要的朋友可以参考下
    2016-01-01

最新评论