js operates CheckBoxList to achieve full selection/inverse selection (completed on the customer service side)

js operates CheckBoxList to achieve full selection/inverse selection (completed on the customer service side)_javascript skills

WBOY

Release： 2016-05-16 17:42:19

Original

1224 people have browsed it

For the CheckBoxList control, on the one hand, it is necessary to bind a large amount of data on the server side; on the other hand, it is often required to implement functions such as all selection and inverse selection. Although this aspect of the work can be done on the server side, it seems that such a simple task should be done on the client side.

Specific method:
Put a CheckBoxList control in the page and add several items to analyze the HTML code it generates, so that you can use js to
dynamically When controlling, it will be very clear that the test code is as follows:

Copy the code The code is as follows:

 
RepeatColumns="3"> 



789< /asp:ListItem> 







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

Copy code The code is as follows:

 
1232 
 
654 
 
.....

Here, excerpt Part of the code, the blue part is what we care about. In HTML CheckBoxList generates
many inputs (type is checkbox), and its ID is "CheckBoxList1_i" (i is a number). In this way, we only
need to know a few items to easily control it with js.
These inputs are included in a table with the id CheckBoxList1, so they can be passed:

Copy the code The code is as follows:

document.getElementById("CheckBoxList1").getElementsByTagName("input").length

This method gets how many items there are in CheckBoxList. The remaining work is actually It's very simple, just change the status of each
checkbox through js. First add three buttons to achieve full selection, inverse selection and clear control, as shown below:

Copy code The code is as follows:

Add select all and reverse selection And the clearing function is as follows:

Copy code 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").getElementsByTagName("input").length;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; 
} 
} 

자, 이제 IE 테스트를 통해 백그라운드에서 바인딩 작업을 할 수 있고, 모두 선택 등의 보조 기능도 자유롭게 사용할 수 있게 되었습니다!