JS operation checkboxlist

For the checkboxlist control, on the one hand, it is necessary to bind a large amount of data to the server, and on the other hand, it is usually required to implement full

Select, reverse select, and other functions. Although this can be done on the server side, it seems that such a simple job should be completed on the client side.

.

Specific Method:

Add a checkboxlist control to the page and add several items to analyze the generated HTMLCodeIn this way, JS is used

The test code is as follows:

<ASP:Checkboxlist ID= "Checkboxlist1" Runat= "Server" Cellpadding= "3" Cellspacing= "3"

Repeatcolumns= "3">

Asp : listitem > 1232 Asp : listitem >

Asp : listitem > 254 Asp : listitem >

Asp : listitem value =" 5643 "> 5643 Asp : listitem >

Asp : listitem > 789 Asp : listitem >

Asp : listitem > 654 Asp : listitem >

Asp : listitem > 564 Asp : listitem >

Asp : listitem > 8564 Asp : listitem >

Asp : listitem > 8564 Asp : listitem >

Asp : listitem > 5452 Asp : listitem >

<ASP:Listitem>5641</ASP:Listitem>

</ASP:Checkboxlist>

View and analyze the HTML in the browser: The following is the HTML code generated by the dropdownlist control.

<Table id = "checkboxlist1" cellspacing = "3" cellpadding = "3" border = "0">
<Tr>
<TD><Input id = "checkboxlist00000" type = "checkbox" name = "checkboxlist1 $0"/> <label for = "checkboxlist00000"> 1232 </label>

</TD>

<TD> <input id = "checkboxlist1_4" type = "checkbox" name = "checkboxlist1 $4"/> <label for = "checkboxlist1_4"> 654 </label>

</TD>

.......

</Table>

Here, some code is excerpted, and the blue part is of interest to us. In HTML, checkboxlist generates

Many inputs (whose type is checkbox) and whose ID is "checkboxlistpolici" (I is a number ). In this way, we only

You need to know a few items to easily implement JS control over it.

These inputs are included in a table with the ID of checkboxlist1. Therefore, you can use:

Document. getelementbyid ("checkboxlist1"). getelementsbytagname ("input"). Length

This method gets the total number of items in the checkboxlist, and the rest of the work is actually very simple. Change each item through JS

The status of the checkbox. Add three buttons to implement full selection, invert selection, and clear control, as shown below:

<Input Type= "Button" Onclick= "Checkall ()" Value= "Check all" />

input type =" button " onclick =" reverseall () " value =" reverse all " id =" button1 " />

<Input Type= "Button" Onclick= "Deleteall ()" Value= "Delete all" />

The add all, invert, and clear functions are as follows:

FunctionCheckall (){

 

 

// Alert (document. getelementbyid ("checkboxlist1"). getelementsbytagname ("input"). Length );

For(VaRI = 0; I <document. getelementbyid ("Checkboxlist1"). Getelementsbytagname ("Input"). Length; I ++)

{

Document. getelementbyid ("Checkboxlist1 _"+ I). Checked =True;

}

}

FunctionDeleteall (){

For(VaRI = 0; I <document. getelementbyid ("Checkboxlist1"). Getelementsbytagname ("Input"). Length; I ++)

{

Document. getelementbyid ("Checkboxlist1 _"+ I). Checked =False;

}

}

FunctionReverseall (){

For(VaRI = 0; I <document. getelementbyid ("Checkboxlist1"). Getelementsbytagname ("Input"). Length; I ++)

{

VaRObjcheck = Document. getelementbyid ("Checkboxlist1 _"+ I );

If(Objcheck. Checked)

Objcheck. Checked =False;

Else

Objcheck. Checked =True;

}

}

 

OK. Now I passed the IE test. The binding work can be performed at the backend. All the other auxiliary functions can be used freely !!!