Js operation CheckBoxList to achieve full/inverse selection (completed at the Customer Service end) _ javascript skills

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 often required to implement full selection, reverse selection, and other functions. Next we will introduce the js operation CheckBoxList to implement full selection and inverse selection, if you are interested, you can understand that it may be helpful for the CheckBoxList control. On the one hand, you need to bind a large amount of data to the server, and on the other hand, you often need to implement full-selection and reverse-selection functions. Although this can be done on the server side, it seems that such a simple job should be done on the client side.

Method:
Add a CheckBoxList control to the page and add several items to analyze the HTML code generated by the control.
The test code is as follows:

The Code is as follows:

RepeatColumns = "3">
1232
254
5643
789
654
564
8564
8564
5452
5641

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

The Code is as follows:

1232

654

.......

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:

The Code is as follows:

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:

The Code is as follows:

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

The Code is as follows:

FunctioncheckAll (){
// Alert (document. getElementById ("CheckBoxList1"). getElementsByTagName ("input"). length );
For (vari = 0; I {
Document. getElementById ("CheckBoxList1 _" + I). checked = true;
}
}
FunctiondeleteAll (){
For (vari = 0; I {
Document. getElementById ("CheckBoxList1 _" + I). checked = false;
}
}
FunctionReverseAll (){
For (vari = 0; I {
VarobjCheck = document. getElementById ("CheckBoxList1 _" + I );
If (objCheck. checked)
ObjCheck. checked = false;
Else
ObjCheck. checked = true;
}
}

OK. Now I have passed the IE test. The binding work can be performed at the backend, select all, and other auxiliary functions!