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

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

相关文章

  • js 单引号替换成双引号,双引号替换成单引号的实现方法

    js 单引号替换成双引号,双引号替换成单引号的实现方法

    下面小编就为大家带来一篇js 单引号替换成双引号,双引号替换成单引号的实现方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-02-02
  • 微信小程序中添加客服按钮contact-button功能

    微信小程序中添加客服按钮contact-button功能

    这篇文章主要介绍了微信小程序中添加客服按钮contact-button功能,小程序的客服系统,是微信做的非常成功的功能,开发者很容易的实现客服功能
    2018-04-04
  • Javascript 对象(object)合并操作实例分析

    Javascript 对象(object)合并操作实例分析

    这篇文章主要介绍了Javascript 对象(object)合并操作,结合实例形式分析了javascript基于jQuery的extend方法、对象属性、遍历赋值等操作实现对象合并相关操作技巧与使用注意事项,需要的朋友可以参考下
    2019-07-07
  • layUI的验证码功能及校验实例

    layUI的验证码功能及校验实例

    今天小编就为大家分享一篇layUI的验证码功能及校验实例,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2019-10-10
  • js实现点击切换和自动播放的轮播图

    js实现点击切换和自动播放的轮播图

    这篇文章主要为大家详细介绍了js实现点击切换和自动播放的轮播图,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-07-07
  • JS支付页面倒计时的实现示例

    JS支付页面倒计时的实现示例

    本文主要介绍了JS支付页面倒计时的实现示例,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-03-03
  • js获取html页面节点方法(递归方式)

    js获取html页面节点方法(递归方式)

    这篇文章主要介绍了js使用递归方式获取html页面节点的方法,大家可以参考使用吧
    2013-12-12
  • 深入理解redux之compose的具体应用

    深入理解redux之compose的具体应用

    这篇文章主要介绍了深入理解redux之compose的具体应用,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-01-01
  • JS实现的自定义网页拖动类

    JS实现的自定义网页拖动类

    这篇文章主要介绍了JS实现的自定义网页拖动类,涉及页面元素响应鼠标事件动态改变属性的相关实现技巧,需要的朋友可以参考下
    2015-11-11
  • Vue+ElementUI实现文件照片音频视频预览功能

    Vue+ElementUI实现文件照片音频视频预览功能

    这篇文章主要介绍了JavaScript代码实现微博批量取消关注功能,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-02-02

最新评论