Gemeinschaft Lernen Tools-Bibliothek Freizeit
suchen
Deutsch
Heim > Web-Frontend > js-Tutorial > js操作CheckBoxList实现全选/反选(在客服端完成)_javascript技巧

js操作CheckBoxList实现全选/反选(在客服端完成)_javascript技巧

WBOY
Freigeben： 2016-05-16 17:42:19
Original
1261 Leute haben es durchsucht

对于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(){
//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，现在通过IE测试，绑定工作可以在后台，全选等辅助功能可以自由发挥了！
Verwandte Etiketten：
全选 Gegenwahl
Quelle：php.cn
Vorheriger Artikel：漂亮的jquery提示效果(仿腾讯弹出层)_jquery Nächster Artikel：js解析与序列化json数据(一)json.stringify()的基本用法_json
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Aktuelle Ausgaben
Das untergeordnete Fenster bedient das übergeordnete Fenster, aber die Ausgabe antwortet nicht. Die ersten beiden Sätze sind ausführbar, der letzte Satz jedoch nicht.
Aus 2024-04-19 15:37:47
0
1
1361
Sudoku-Checker funktioniert nicht? Kann mir jemand helfen, den Fehler zu identifizieren? Ich habe alles im Online-Editor versucht, erhalte aber immer noch die Fehlermeldung. Aber ...
Aus 2024-04-06 21:21:07
0
1
474
Was sind die Best Practices für die Anzeige von Versionsinformationen in Webanwendungen? Ich entwickle eine Webanwendung. Was sind die Best Practices für die Anzeige von Versionsi...
Aus 2024-04-06 19:13:16
0
2
476
Streudiagrammpunkte behalten beim Zoomen in d3.js keine Werte bei Dies ist das erste Mal, dass ich d3.js verwende. Bitte haben Sie Geduld. Ich habe es als r...
Aus 2024-04-06 18:16:26
0
1
403
Ausgeblendete Seitenbereiche anzeigen: aktiviert Ich hätte gerne ein Navigationsmenü im Seitenbereich mit der Möglichkeit, über ein animier...
Aus 2024-04-06 15:49:33
0
1
319
verwandte Themen
Mehr>
Beliebte Empfehlungen
Beliebte Tutorials
Mehr>
Verwandte Tutorials
Beliebte Empfehlungen
Aktuelle Kurse
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage