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 相关文章推荐
有关js的变量作用域和this指针的讨论
Dec 16 Javascript
JQuery中$之选择器用法介绍
Apr 05 Javascript
浅谈document.write()输出样式
May 07 Javascript
在easyUI开发中,出现jquery.easyui.min.js函数库问题的解决办法
Sep 11 Javascript
JavaScript中eval函数的问题
Jan 31 Javascript
JavaScript必看小技巧(必看)
Jun 07 Javascript
ion content 滚动到底部会遮住一部分视图的快速解决方法
Sep 06 Javascript
vue 动态改变静态图片以及请求网络图片的实现方法
Feb 07 Javascript
js input输入百分号保存数据库失败的解决方法
May 26 Javascript
vue.js实现数据库的JSON数据输出渲染到html页面功能示例
Aug 03 Javascript
javascript实现简易数码时钟
Mar 30 Javascript
JS实现选项卡插件的两种写法(jQuery和class)
Dec 30 jQuery
自定义右键属性覆盖浏览器默认右键行为实现代码
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
如何选购合适的收音机
2021/03/01 无线电
PHP Curl多线程原理实例详解
2013/11/06 PHP
ThinkPHP中__initialize()和类的构造函数__construct()用法分析
2014/11/29 PHP
PHP调用API接口实现天气查询功能的示例
2017/09/21 PHP
JS宝典学习笔记(下)
2007/01/10 Javascript
JavaScript 设计模式 富有表现力的Javascript(一)
2010/05/26 Javascript
JavaScript中:表达式和语句的区别[译]
2012/09/17 Javascript
js实现绿白相间竖向网页百叶窗动画切换效果
2015/03/02 Javascript
JS+CSS实现简易实用的滑动门菜单效果
2015/09/18 Javascript
bootstrap手风琴折叠示例代码分享
2017/05/22 Javascript
vue子组件使用自定义事件向父组件传递数据
2017/05/27 Javascript
vue打包后显示空白正确处理方法
2017/11/01 Javascript
angular5 httpclient的示例实战
2018/03/12 Javascript
JavaScript生成指定范围随机数和随机序列的方法
2018/05/05 Javascript
用Python的线程来解决生产者消费问题的示例
2015/04/02 Python
Python的collections模块中namedtuple结构使用示例
2016/07/07 Python
python中pandas.DataFrame排除特定行方法示例
2017/03/12 Python
详解Python进程间通信之命名管道
2017/08/28 Python
TensorFlow深度学习之卷积神经网络CNN
2018/03/09 Python
python中format()函数的简单使用教程
2018/03/14 Python
python实现飞机大战微信小游戏
2020/03/21 Python
对web.py设置favicon.ico的方法详解
2018/12/04 Python
使用Django2快速开发Web项目的详细步骤
2019/01/06 Python
详解Python3除法之真除法、截断除法和下取整对比
2019/05/23 Python
python 实现矩阵填充0的例子
2019/11/29 Python
自我鉴定范文
2013/11/10 职场文书
护士求职信范文
2014/05/24 职场文书
学校花圃的标语
2014/06/18 职场文书
关于旅游的活动方案
2014/08/15 职场文书
关于清明节的演讲稿
2014/09/13 职场文书
五年级上册复习计划
2015/01/19 职场文书
团干部培训班心得体会
2016/01/06 职场文书
详解PHP服务器如何在有限的资源里最大提升并发能力
2021/05/25 PHP
教你怎么用PyCharm为同一服务器配置多个python解释器
2021/05/31 Python
使用compose函数优化代码提高可读性及扩展性
2022/06/16 Javascript
Java 多线程并发FutureTask
2022/06/28 Java/Android