js操作CheckBoxList實作全選/反選(在客服端完成)_javascript技巧

對於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測試，綁定工作可以在後台，全選等輔助功能可以自由發揮了！