對於CheckBoxList控制項來說,一方面要實作大量資料在伺服器端的綁定工作,另一方面往往要求實作全選、反選等功能。雖然可以在伺服器端完成這方面的工作,但這樣簡單的工作似乎更應該在客戶端完成。
具體方法:
在頁面中放入一個CheckBoxList控件,並添加幾項,用來分析其產生的HTML代碼,這樣在使用js進行
動態控制時,將會非常清楚其測試程式碼如下所示:
程式碼如下:
RepeatColumns="3">
1232
254
5643
789
654
564
8564
8564
5452
5641 在瀏覽器中查看,並對Html進行分析:以下是DropDownList控制項產生的HTML程式碼。 複製程式碼
代碼如下:
1232
|
654
| .......
在這裡,節選了部分程式碼,其中藍色部分是我們關心的。在HTML中CheckBoxList產生了
許多input(type為checkbox),並且其ID為「CheckBoxList1_i」(i為數字)。這樣我們只 需要知道總共有幾項就可以輕鬆的實作js對它的控制。
這些input都包含在一個id為CheckBoxList1的table中,因此可以透過:複製程式碼
程式碼如下:
document.getElementById("CheckBoxList1").getElementsByTagName("input").length
這方法取得CheckBoxList一共有多少項,剩下的工作其實很簡單了,透過js更改每一個
checkbox的狀態即可。先加入三個button,用來達到全選、反選、清除控制,如下: 複製程式碼
程式碼如下:
程式碼如下:
functioncheckAll(){
functioncheckAll(){
//alert(docent(). 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;
}
}
>Allfunctionfunction {
for(vari=0;i{
varobjCheck=document.getElementById(Check>{
varobjCheck=document.getElementById( ;
if(objCheck.checked)
objCheck.checked=false; else objCheck.checked=true; } }
OK,現在透過IE測試,綁定工作可以在後台,全選等輔助功能可以自由發揮了!