首页 > 编程 > JavaScript > 正文

javascript中CheckBox全选终极方案

2019-11-20 12:26:34
字体:
来源:转载
供稿:网友

在我们的程序开发中经常会要用到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;} 

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

发表评论 共有条评论
用户名: 密码:
验证码: 匿名发表