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中处理与当前时间间隔的函数代码
May 23 Javascript
使用JavaScript 编写简单计算器
Nov 24 Javascript
js拼接html字符串的注意事项
Oct 13 Javascript
JavaScript实现页面无操作倒计时退出
Oct 22 Javascript
浅析javaScript中的浅拷贝和深拷贝
Feb 15 Javascript
Angular4项目中添加i18n国际化插件ngx-translate的步骤详解
Jul 02 Javascript
微信、QQ、微博、Safari中使用js唤起App
Jan 24 Javascript
微信小程序radio组件使用详解
Jan 31 Javascript
JavaScript实现多态和继承的封装操作示例
Aug 20 Javascript
JavaScript中工厂函数与构造函数示例详解
May 06 Javascript
JS实现百度搜索框
Feb 25 Javascript
JS前端使用Canvas快速实现手势解锁特效
Sep 23 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
phpmailer发送邮件之后,返回收件人是否阅读了邮件的方法
2014/07/19 PHP
php使用正则验证中文
2016/04/06 PHP
PHP使用PDO实现mysql防注入功能详解
2019/12/20 PHP
Extjs ajax同步请求时post方式参数发送方式
2009/08/05 Javascript
JS批量修改PS中图层名称的方法
2014/01/26 Javascript
js实现登陆遮罩效果的方法
2015/07/28 Javascript
实例详解JavaScript获取链接参数的方法
2016/01/01 Javascript
纯js实现图片匀速淡入淡出效果
2017/08/22 Javascript
AngularJS 中ui-view传参的实例详解
2017/08/25 Javascript
JS正则表达式完美实现身份证校验功能
2017/10/18 Javascript
angular 表单验证器验证的同时限制输入的实现
2019/04/11 Javascript
微信小程序如何加载数据库真实数据的实现
2020/03/04 Javascript
vue 实现在同一界面实现组件的动态添加和删除功能
2020/06/16 Javascript
javascript实现移动端触屏拖拽功能
2020/07/29 Javascript
python如何查看系统网络流量的信息
2016/09/12 Python
机器学习python实战之决策树
2017/11/01 Python
Python利用multiprocessing实现最简单的分布式作业调度系统实例
2017/11/14 Python
numpy.std() 计算矩阵标准差的方法
2018/07/11 Python
Pandas数据离散化原理及实例解析
2019/11/16 Python
简单了解为什么python函数后有多个括号
2019/12/19 Python
python3操作注册表的方法(Url protocol)
2020/02/05 Python
使用Django实现把两个模型类的数据聚合在一起
2020/03/28 Python
python 引用传递和值传递详解(实参,形参)
2020/06/05 Python
Python 如何创建一个简单的REST接口
2020/07/30 Python
Python Request类源码实现方法及原理解析
2020/08/17 Python
Pycharm添加虚拟解释器报错问题解决方案
2020/10/13 Python
Html5 localStorage入门教程
2018/04/26 HTML / CSS
HTML5中Localstorage的使用教程
2015/07/09 HTML / CSS
加拿大时尚床上用品零售商:QE Home | Quilts Etc
2018/01/22 全球购物
澳大利亚拥有最好的家具和家居用品在线目的地:Nestz
2019/02/23 全球购物
Capitol Lighting的1800lighting.com:住宅和商业照明
2019/04/10 全球购物
合作协议书怎么写
2014/04/18 职场文书
党员对十八届四中全会的期盼思想汇报范文
2014/10/17 职场文书
物业保洁员管理制度
2015/08/05 职场文书
护士年终工作总结不会写?各科护士模板总结
2020/01/02 职场文书
MySQL表类型 存储引擎 的选择
2021/11/11 MySQL