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


Posted in Javascript onFebruary 02, 2013

对于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测试,绑定工作可以在后台,全选等辅助功能可以自由发挥了!
Javascript 相关文章推荐
jQuery powerFloat万能浮动层下拉层插件使用介绍
Dec 27 Javascript
jQuery jqgrid 对含特殊字符json 数据的 Java 处理方法
Jan 01 Javascript
Javascript Request获取请求参数如何实现
Nov 28 Javascript
ajax java 实现自动完成功能
Dec 19 Javascript
js function定义函数的几种不错方法
Feb 27 Javascript
javascript实现拖动元素交换位置
Nov 29 Javascript
jQuery使用$.ajax进行即时验证实例详解
Dec 11 Javascript
移动端滑动插件Swipe教程
Oct 16 Javascript
node和vue实现商城用户地址模块
Dec 05 Javascript
vue如何截取字符串
May 06 Javascript
webpack HappyPack实战详解
Oct 08 Javascript
微信小程序实现多选框功能的实例代码
Jun 24 Javascript
自定义右键属性覆盖浏览器默认右键行为实现代码
Feb 02 #Javascript
js触发asp.net的Button的Onclick事件应用
Feb 02 #Javascript
js解析xml字符串和xml文档实现原理及代码(针对ie与火狐)
Feb 02 #Javascript
js中eval()函数和trim()去掉字符串左右空格应用
Feb 02 #Javascript
jquery的冒泡事件的阻止与允许(三种实现方法)
Feb 01 #Javascript
JavaScript NodeTree导航栏(菜单项JSON类型/自制)
Feb 01 #Javascript
js自定义事件及事件交互原理概述(二)
Feb 01 #Javascript
You might like
PHP实现图片旋转效果实例代码
2014/10/01 PHP
php解析http获取的json字符串变量总是空白null
2015/03/02 PHP
php写入mysql中文乱码的实例解决方法
2019/09/17 PHP
List Installed Software Features
2007/06/11 Javascript
syntaxhighlighter 使用方法
2007/07/02 Javascript
JS中showModalDialog 的使用解析
2013/04/17 Javascript
jquery删除数据记录时的弹出提示效果
2014/05/06 Javascript
javascript数组去重方法汇总
2015/04/23 Javascript
javascript小数精度丢失的完美解决方法
2016/05/31 Javascript
JavaScript设计模式之单体模式全面解析
2016/09/09 Javascript
JS日程管理插件FullCalendar中文说明文档
2017/02/06 Javascript
Bootstrap 网格系统布局详解
2017/03/19 Javascript
angularjs实现首页轮播图效果
2017/04/14 Javascript
js实现从右往左匀速显示图片(无缝轮播)
2020/06/29 Javascript
Vuejs通过拖动改变元素宽度实现自适应
2020/09/02 Javascript
[02:41]DOTA2英雄基础教程 亚巴顿
2014/01/02 DOTA
python绘图库Matplotlib的安装
2014/07/03 Python
python入门基础之用户输入与模块初认识
2016/11/14 Python
Python实现mysql数据库更新表数据接口的功能
2017/11/19 Python
Django框架 查询Extra功能实现解析
2019/09/04 Python
Python开发之基于模板匹配的信用卡数字识别功能
2020/01/13 Python
python GUI库图形界面开发之PyQt5表单布局控件QFormLayout详细使用方法与实例
2020/03/06 Python
在Python中字典按值排序的实现方法
2020/11/12 Python
LivingSocial爱尔兰:爱尔兰本地优惠
2018/08/10 全球购物
介绍一下.net和Java的特点和区别
2012/09/26 面试题
感恩教育活动总结
2014/05/05 职场文书
2014年“向国旗敬礼”网上签名寄语活动方案
2014/09/27 职场文书
2014年德育工作总结
2014/11/20 职场文书
2015年建筑工作总结报告
2015/05/04 职场文书
当幸福来敲门英文观后感
2015/06/01 职场文书
魂断蓝桥观后感
2015/06/10 职场文书
活动简报范文
2015/07/22 职场文书
国庆放假通知怎么写
2015/07/30 职场文书
《女娲补天》教学反思
2016/02/20 职场文书
温馨祝福晨语:美丽的一天从我的问候开始
2019/11/28 职场文书
PostgreSQL基于pgrouting的路径规划处理方法
2022/04/18 PostgreSQL