checkbox 全选终极方案

本文介绍如何在Web开发中使用JavaScript实现复选框全选功能。通过在repeater控件中设置checkbox,结合checkAll方法实现全选与取消全选,并提供获取已选中项数量的方法。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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

 

下面以repeater 为例,在repeater的header 和item中放入checkbox控件

  1. <asp:Repeater ID="rptGroup" runat="server">
  2.             <HeaderTemplate>
  3.                 <table width="100%" cellspacing="1" class="tab">
  4.                     <tr>
  5.                         <td width="3%" align="center" class="td-01"><input type="checkbox" id="chkAll" name="chkAll" value="checkbox" onclick="checkAll('chkAll',this);" />        </td>
  6.                     </tr>
  7.             </HeaderTemplate>
  8.             <ItemTemplate>
  9.                 <tr>
  10.                 <td align="center" ><input type="checkbox" name="chkSelect" value='<%# Eval("ID") %>'  onclick="checkAll('chkAll',this);"/></td>
  11.                 </tr>
  12.             </ItemTemplate>
  13.             <FooterTemplate>
  14.                 </table>
  15.             </FooterTemplate>
  16.         </asp:Repeater>
  17.             

 

下面就是js脚本了

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

  1. function checkAll(chkAllID,thisObj)
  2. {
  3.     var chkAll = document.getElementById(chkAllID);
  4.     var chks = document.getElementsByTagName("input");
  5.     var chkNo = 0;
  6.     var selectNo = 0;
  7.     for(var i =0; i < chks.length; i++)
  8.     {
  9.        if(chks[i].type == "checkbox")
  10.        {
  11.           //全选触发事件  
  12.           if(chkAll == thisObj)
  13.           {
  14.              chks[i].checked = thisObj.checked;             
  15.           }          
  16.           //非全选触发
  17.           else
  18.           {
  19.             if(chks[i].checked && chks[i].id != chkAllID)
  20.              selectNo++;
  21.           }
  22.           if(chks[i].id != chkAllID)
  23.           {
  24.             chkNo++;
  25.           }
  26.        }
  27.     } 
  28.     if(chkAll != thisObj)
  29.     {
  30.         chkAll.checked = chkNo==selectNo;
  31.     }
  32. }

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

  1. function checkSelectNo(chkAllID)
  2. {
  3.     var chks = document.getElementsByTagName("input");
  4.     var selectNo =0;
  5.     for(var i =0; i < chks.length; i++)
  6.     {
  7.        if(chks[i].type == "checkbox")
  8.        {
  9.             if(chks[i].id != chkAllID && chks[i].checked)
  10.             {
  11.                 selectNo++;
  12.             }
  13.        }
  14.     }  
  15.     return selectNo;
  16. }

 

 

 
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值