The onclick event of the JS registration control

Today we have a full selection function:
1. Click Select All, All selected. Check the status and click Select All, deselect all
2. Click on the member to determine if the member is all selected, true: Select All selected, False: All selected is unchecked.

Using JS is a tricky way to get to a collection of member objects, and first we learned that there are several ways to get controls:
1.document.getelementbyid ("Control ID") Gets the specified control because the ID is unique according to the HTML specification. Note: Use the <%= control when you get the ID of the ASP. id.clientid%>
2.document.getelementsbyname ("Control name") gets a collection of controls because different controls can set the same name. Note: When we get the name of the ASP., we cannot find the name we set because the server control will re-assign the control ID and name when it generates the HTML control after compilation. So the name we wrote ourselves didn't work.
3.document.getelementsbytagname ("HTML tag") gets the collection of controls.
From the above analysis can be drawn:
1. You can use the Document.getelementsbyname () method to allow the name of the server control to not be generated automatically
2. Just use document.getElementsByTagName ("HTML tag")

Because there is no way to get a control based on class in document, we use the getElementsByTagName () method to create a method to get the control from class

function Getelementsbyclassname (className) {    var classelements = []    allelements = document.getElementsByTagName ("*");    for (var i = 0; i < allelements.length; i++) {        if (allelements[i].classname = = className) {            Classelements[class Elements.length] = Allelements[i];        }    }    return classelements;}

Page code:

 <table id= "tblrole" cellpadding= "0" cellspacing= "0" > <tr> &LT;TD style= "padding:0px; border:0px; " > <asp:checkbox id= "chkall" runat= "Server" onclick= "Ischkall (this, ' Chkallsearchm Anager ') "/></td> <td style=" padding:0px; border:0px; "                                        > <label for= "<%=chkall.clientid%>" > Full て</label></td> <td style= "padding:0px; border:0px; " > <asp:checkbox id= "chkresolution" cssclass= "role" runat= "Server"/></td&gt                                ; &LT;TD style= "padding:0px; border:0px; "                                        > <label for= "<%=chkresolution.clientid%>" >                            </label></td> by the decision    &LT;TD style= "padding:0px; border:0px; "                                > <asp:checkbox id= "Chkreview" class= "role" runat= "Server"/></td> &LT;TD style= "padding:0px; border:0px; "                                        > <label for= "<%=chkreview.clientid%>" > Jury </label></td> <td style= "padding:0px; border:0px; "                                > <asp:checkbox id= "CHKPMO" cssclass= "role" runat= "Server"/></td> &LT;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>                                &LT;TD style= "padding:0px; border:0px; "                                        > <label for= "<%=chkorganizer.clientid%>" > Main reminder </label></td> <td style= "padding:0px; border:0px; "                                > <asp:checkbox id= "chkparties" cssclass= "role" runat= "Server"/></td> &LT;TD style= "padding:0px; border:0px; "                                        > <label for= "<%=chkparties.clientid%>" > Parties </label></td> &LT;TD style= "padding:0px; border:0px; " > <asp:checkbox id= "chkparticipants" cssclass= "role" runat= "Server"/></td&                                Gt &LT;TD style= "padding:0px; border:0px; " > <label for= "<%=chkparticipantS.clientid%> "> Participants </label></td> & LT;TD style= "padding:0px; border:0px; " > <asp:checkbox id= "Chkallsearchmanager" runat= "Server" clientidmode= "Static" O Nclick= "Ischkall (This, ' Chkallsearchmanager ')"/></td> <td style= "padding:0px; border:0px; "                                        > <label for= "<%=chkallsearchmanager.clientid%>" > All managers Eiken </label></td> </tr> </ Table>

　　

　　

After we get to it, we think it should be very simple, we can find the HTML control according to the method we wrote, and then do the corresponding operation. OK, Code:

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

When we were really running, we found that the Member checkbox was unresponsive, and the code found that the CssClass we added in the checkbox was put into the Span tab.

Because we are writing an ASP. HTML control, it would be very simple. It was solved with 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 = FAL Se;}}    }

So replace the Classrole[i],getelementsbytagname ("input") with Classrole[i].getelementsbytagname ("input") [0] Gets the collection of HTML tags that contain the input tag, so add the subscript to it.

So much of it is used to click on the Select All checkbox, Below is the checkbox for clicking on a member.

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 = Tru e;        }        else {            Isnotcheck = true;        }    }    if (Ischeck = = true) {        if (Isnotcheck = = False) {            objall.checked = true;        }        else {            objall.checked = false;}}}    

The above code effect: The members are all selected, the Select checkbox is selected, the member has a unchecked, the Select checkbox is unchecked. The method is written, and now we are going to put this method on the onclick event of the Member checkbox.

There are many ways to register events, but the general direction should be divided into parameters and non-parametric registrations.

The registration of the non-parametric method is relatively simple.
1.checkbox.onclick=cusclick;
2.checkbox.onclick=function () {}
3.checkbox.attachevent (' onclick ', function () {alert (' 22 ');}); /execution order is reversed in order of addition, advanced and out

To register with the method of participation:
1.checkbox.onclick=function () {chkroles (objall);}
2.checkbox.attachevent (' onclick ', function () {chkroles (objall);}); /execution order is reversed in order of addition, advanced and out

Page code:

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 () {                CHKR Oles (Objall, objchksearchmanage);            }            Roles[i].getelementsbytagname ("input") [0].attachevent ("onclick", Chkroles (Objall, Objchksearchmanage));        }    }

　　

The onclick event of the JS registration control