首頁 > web前端 > js教程 > js操作CheckBoxList實作全選/反選(在客服端完成)_javascript技巧

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

WBOY
發布: 2016-05-16 17:42:19
原創
1263 人瀏覽過

對於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測試,綁定工作可以在後台,全選等輔助功能可以自由發揮了!
相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板