视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
js操作CheckBoxList实现全选/反选(在客服端完成)_javascript技巧
2020-11-27 21:07:08 责编:小采
文档


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

具体方法:
在页面中放入一个CheckBoxList控件,并添加几项,用来分析其产生的HTML代码,这样在使用js进行
动态控制时,将会非常清晰其测试代码如下所示:
代码如下:
RepeatColumns="3">
1232
254
53
7
654
5
85
85
5452
51


在浏览器中查看,并对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测试,绑定工作可以在后台,全选等辅助功能可以自由发挥了!

下载本文
显示全文
专题