js 注册控件的onclick事件

今天做了一个全选功能：
1.点击全选，全部选中。选中状态再点击全选，全部取消选中
2.点击成员，判断是否成员全部选中，true:全选为选中状态，false：全选为未选中状态。

使用js是比较麻烦的就是如何获取到成员对象集合，首先我们了解到获取控件的方法有几种：
1.document.getElementById("控件ID") 获取指定的控件，因为根据HTML规范中ID是具有唯一性的。注意：在获取ASP.Net控件的ID时，使用<%=控件ID.ClientID%>
2.document.getElementsByName("控件Name") 获取控件的集合，因为不同的控件可以设置同一个Name。注意：在获取ASP.Net控件的name时，我们却找不到我们设置的Name，原因是服务器控件在编译之后会生成HTML控件时会重新对控件ID和Name赋值。所以我们自己写的Name就没有起到作用了。
3.document.getElementsByTagName("Html的标签") 获取控件的集合。
由从上面分析可以得出：
1.能让服务器控件的Name能不自动生成，就可以使用document.getElementsByName()方法
2.就是使用document.getElementsByTagName("Html的标签") 

因为document中没有根据Class获取控件的方法，我们就使用getElementsByTagName()方法创建一个根据Class获取控件的方法

function getElementsByClassName(className) {
    var classElements = []
    allElements = document.getElementsByTagName("*");
    for (var i = 0; i < allElements.length; i++) {
        if (allElements[i].className == className) {
            classElements[classElements.length] = allElements[i];
        }
    }
    return classElements;
}

页面代码：

 <table id="tblRole" cellpadding="0" cellspacing="0">
                            <tr>
                                <td style=" padding:0px; border:0px;">
                                    <asp:CheckBox ID="chkAll" runat="server"  Onclick="isChkAll(this,'chkAllSearchManager')" /></td>
                                <td style=" padding:0px; border:0px;">
                                    <label for="<%=chkAll.ClientID %>">
                                        全て</label></td>
                                <td style=" padding:0px; border:0px;">
                                    <asp:CheckBox ID="chkResolution" CssClass="role" runat="server" /></td>
                                <td style=" padding:0px; border:0px;">
                                    <label for="<%=chkResolution.ClientID %>">
                                        決議者</label></td>
                                <td style=" padding:0px; border:0px;">
                                    <asp:CheckBox ID="chkReview" Class="role"  runat="server" /></td>
                                <td style=" padding:0px; border:0px;">
                                    <label for="<%=chkReview.ClientID %>">
                                        審議者</label></td>
                                <td style=" padding:0px; border:0px;">
                                    <asp:CheckBox ID="chkPMO" CssClass="role" runat="server" /></td>
                                <td style=" padding:0px; border:0px;">
                                    <label for="<%=chkPMO.ClientID %>">
                                        PMO</label></td>
                                <td style=" padding:0px; border:0px;">
                                    <asp:CheckBox ID="chkOrganizer" CssClass="role" runat="server" /></td>
                                <td style=" padding:0px; border:0px;">
                                    <label for="<%=chkOrganizer.ClientID %>">
                                        主催者</label></td>
                                <td style=" padding:0px; border:0px;">
                                    <asp:CheckBox ID="chkParties" CssClass="role" runat="server" /></td>
                                <td style=" padding:0px; border:0px;">
                                    <label for="<%=chkParties.ClientID %>">
                                        当事者</label></td>
                                <td style=" padding:0px; border:0px;">
                                    <asp:CheckBox ID="chkParticipants" CssClass="role" runat="server" /></td>
                                <td style=" padding:0px; border:0px;">
                                    <label for="<%=chkParticipants.ClientID %>">
                                        参加者</label></td>
                                <td style=" padding:0px; border:0px;">
                                    <asp:CheckBox ID="chkAllSearchManager" runat="server"  ClientIDMode="Static"  Onclick="isChkAll(this,'chkAllSearchManager')" /></td>
                                <td style=" padding:0px; border:0px;">
                                    <label for="<%=chkAllSearchManager.ClientID %>">
                                        管理者全件検索</label></td>
                            </tr>
                            </table>

　　

　　

获取到之后，我们想就应该很简单了，根据我们写的方法就可以找到了HTML控件了，然后对其做对应的操作。OK，代码：

function isChkAll(obj) {

    var classRole = getElementsByClassName("role");
    if (obj.checked) {
        for (var i = 0; i < classRole.length; i++) {
            classRole[i].checked = true;
        }
    }
    else {
        for (var i = 0; i < classRole.length; i++) {
            classRole[i].checked = false;
        }
    }
}

　　当我们真的运行时，发现成员checkbox都没反应，查看代码发现我们在checkbox中加的CSSClass被放入到span标签中了。

因为我们写的是ASP.Net控件，如果是HTML控件的话会很简单的。用getElementsByName()就解决了。

function isChkAll(obj, SearchManageid) {

    var classRole = getElementsByClassName("role");
    if (obj.checked) {
        for (var i = 0; i < classRole.length; i++) {
            classRole[i].getElementsByTagName("input")[0].checked = true;
        }
    }
    else {
        for (var i = 0; i < classRole.length; i++) {
            classRole[i].getElementsByTagName("input")[0].checked = false;
        }
    }
}

　　所以要用classRole[i].getElementsByTagName("input")[0]替换classRole[i]，getElementsByTagName("input")获取的是含有input标签的HTML标签集合，所以要给它加下标。

上面说的那么多主要是用于点击全选的checkbox，下面说的是点击成员的checkbox。

function chkRoles(objAll) {
    var roles = getElementsByClassName("role");
    var isCheck = false;
    var isNotCheck = false;
    for (var i = 0; i < roles.length; i++) {
        if (roles[i].getElementsByTagName("input")[0].checked) {
            isCheck = true;
        }
        else {
            isNotCheck = true;
        }
    }

    if (isCheck == true) {
        if (isNotCheck == false) {
            objAll.checked = true;
        }
        else {
            objAll.checked = false;
        }
    } 
}

　　上面的代码效果：成员全部选中，全选checkbox为选中状态，成员有一个没选中，全选checkbox为未选中状态。方法写好了，现在我们就要把这个方法放到成员checkbox的onclick事件上去。

注册事件的方法有很多种，但大方向应该分为有参数和无参数的注册。

无参方法的注册就比较简单了
1.checkbox.onclick=cusclick;
2.checkbox.onclick=function(){}
3.checkbox.attachEvent('onclick', function(){alert('22');});//执行顺序按添加顺序的反序，先进后出

有参的方法注册：
1.checkbox.onclick=function(){chkRoles(objAll);}
2.checkbox.attachEvent('onclick', function(){chkRoles(objAll);});//执行顺序按添加顺序的反序，先进后出

页面代码：

 window.onload = function () {
        init();
    }

    function init() {
        var roles = getElementsByClassName("role");
        var objAll = document.getElementById("<%=chkAll.ClientID %>");
        var objchkSearchManage = document.getElementById("chkAllSearchManager");
        for (var i = 0; i < roles.length; i++) {
            roles[i].getElementsByTagName("input")[0].onclick = function () {
                chkRoles(objAll, objchkSearchManage);
            }
            //roles[i].getElementsByTagName("input")[0].attachEvent("onclick", chkRoles(objAll, objchkSearchManage));
        }
    }