首页 / JAVASCRIPT / js操作CheckBoxList实现全选/反选(在客服端完成)

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

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了js操作CheckBoxList实现全选/反选(在客服端完成)，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2753字，纯文字阅读大概需要4分钟。

内容图文

对于CheckBoxList控件来说，一方面要实现大量数据在服务器端的绑定工作，另一方面往往要求实现全选、反选等功能。虽然可以在服务器端完成这方面的工作，但这样一个简单的工作似乎更应该在客户端完成。

具体方法：
在页面中放入一个CheckBoxList控件，并添加几项，用来分析其产生的HTML代码，这样在使用js进行
动态控制时，将会非常清晰其测试代码如下所示：
代码如下:

<asp:CheckBoxListID="CheckBoxList1"runat="server"CellPadding="3"CellSpacing="3" 
RepeatColumns="3"> 
<asp:ListItem>1232</asp:ListItem> 
<asp:ListItem>254</asp:ListItem> 
<asp:ListItemValue="5643">5643</asp:ListItem> 
<asp:ListItem>789</asp:ListItem> 
<asp:ListItem>654</asp:ListItem> 
<asp:ListItem>564</asp:ListItem> 
<asp:ListItem>8564</asp:ListItem> 
<asp:ListItem>8564</asp:ListItem> 
<asp:ListItem>5452</asp:ListItem> 
<asp:ListItem>5641</asp:ListItem> 
</asp:CheckBoxList> 
 
在浏览器中查看，并对Html进行分析：以下是DropDownList控件生成的HTML代码。 
 代码如下:

<tableid="CheckBoxList1"cellspacing="3"cellpadding="3"border="0"> 
<tr> 
<td><inputid="CheckBoxList1_0"type="checkbox"name="CheckBoxList1$0"/><labelfor="CheckBoxList1_0">1232</label> 
</td> 
<td><inputid="CheckBoxList1_4"type="checkbox"name="CheckBoxList1$4"/><labelfor="CheckBoxList1_4">654</label> 
</td> 
....... 
</table> 
 
在这里，节选了部分代码，其中蓝色部分是我们关心的。在HTML中CheckBoxList生成了 
许多input（type为checkbox），并且其ID为“CheckBoxList1_i”（i为数字）。这样我们只 
需要知道一共有几项就可以轻松的实现js对它的控制。 
这些input都包含在一个id为CheckBoxList1的table中，因此可以通过： 
 代码如下:

document.getElementById("CheckBoxList1").getElementsByTagName("input").length 
 
这一方法获取CheckBoxList一共有多少项，剩下的工作其实就很简单了，通过js更改每一个 
checkbox的状态即可。先添加三个button，用来实现全选、反选及清除控制，如下所示： 
 代码如下:

<inputtype="button"onclick="checkAll()"value="checkAll"/> 
<inputtype="button"onclick="ReverseAll()"value="ReverseAll"id="Button1"/> 
<inputtype="button"onclick="deleteAll()"value="deleteAll"/> 
 
添加全选、反选及清除函数如下： 
 代码如下:

functioncheckAll(){ 
//alert(document.getElementById("CheckBoxList1").getElementsByTagName("input").length); 
for(vari=0;i<document.getElementById("CheckBoxList1").getElementsByTagName("input").length;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<document.getElementById("CheckBoxList1").getElementsByTagName("input").length;i++) 
{ 
varobjCheck=document.getElementById("CheckBoxList1_"+i); 
if(objCheck.checked) 
objCheck.checked=false; 
else 
objCheck.checked=true; 
} 
} 
 
OK，现在通过IE测试，绑定工作可以在后台，全选等辅助功能可以自由发挥了！

内容总结

以上是互联网集市为您收集整理的js操作CheckBoxList实现全选/反选(在客服端完成)全部内容，希望文章能够帮你解决js操作CheckBoxList实现全选/反选(在客服端完成)所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/367296.html

来源：【匿名】