zoukankan      html  css  js  c++  java
  • 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;
    } 
  • 相关阅读:
    (十一)Updating Documents
    (十)Modifying Your Data
    (九)Delete an Index
    (八)Index and Query a Document
    (七)Create an Index
    (六)List All Indices
    (五)Cluster Health
    (四)Exploring Your Cluster
    (三)Installation
    (二)Basic Concepts 基本概念
  • 原文地址:https://www.cnblogs.com/oec2003/p/1318259.html
Copyright © 2011-2022 走看看