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 相关文章推荐
javascript引用对象的方法
Jan 11 Javascript
Javascript+XMLHttpRequest+asp.net无刷新读取数据库数据
Aug 09 Javascript
jQuery下扩展插件和拓展函数的写法(匿名函数使用的典型例子)
Oct 20 Javascript
jQuery1.3.2 升级到jQuery1.4.4需要修改的地方
Jan 06 Javascript
IE与FF下javascript获取网页及窗口大小的区别详解
Jan 14 Javascript
jquery实现背景墙聚光灯效果示例分享
Mar 02 Javascript
微信小程序 css使用技巧总结
Jan 09 Javascript
微信小程序使用image组件显示图片的方法【附源码下载】
Dec 08 Javascript
layui 数据表格+分页+搜索+checkbox+缓存选中项数据的方法
Sep 21 Javascript
js回调函数仿360开机
Dec 26 Javascript
Electron整合React使用搭建开发环境的步骤详解
Jun 07 Javascript
vue.js实现双击放大预览功能
Jun 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
php下实现一个阿拉伯数字转中文数字的函数
2008/07/10 PHP
9个实用的PHP代码片段分享
2015/01/22 PHP
php递归函数三种实现方法及如何实现数字累加
2015/08/07 PHP
PHP的Yii框架中使用数据库的配置和SQL操作实例教程
2016/03/17 PHP
PHP与Java对比学习日期时间函数
2016/07/03 PHP
php实现单笔转账到支付宝功能
2018/10/09 PHP
javascript 写类方式之五
2009/07/05 Javascript
js parseInt(&quot;08&quot;)未指定进位制问题
2010/06/19 Javascript
javascript:void(0)点击登录没反应怎么解决
2015/11/13 Javascript
学习JavaScript设计模式(继承)
2015/11/26 Javascript
解决JavaScript数字精度丢失问题的方法
2015/12/03 Javascript
jQuery实现手机自定义弹出输入框
2016/06/13 Javascript
原生js图片轮播效果实现代码
2016/10/19 Javascript
jQuery基于xml格式数据实现模糊查询及分页功能的方法
2016/12/25 Javascript
js实现一个简单的数字时钟效果
2017/03/29 Javascript
vue实现裁切图片同时实现放大、缩小、旋转功能
2018/03/02 Javascript
vue 指定组件缓存实例详解
2018/04/01 Javascript
快速解决bootstrap下拉菜单无法隐藏的问题
2018/08/10 Javascript
vue页面切换过渡transition效果
2018/10/08 Javascript
vue项目中使用vue-i18n报错的解决方法
2019/01/13 Javascript
详解element-ui设置下拉选择切换必填和非必填
2019/06/17 Javascript
在vue中实现某一些路由页面隐藏导航栏的功能操作
2020/09/21 Javascript
Vue组件生命周期运行原理解析
2020/11/25 Vue.js
Python中super的用法实例
2015/05/28 Python
关于python pyqt5安装失败问题的解决方法
2017/08/08 Python
Python3实现监控新型冠状病毒肺炎疫情的示例代码
2020/02/13 Python
CSS3实现时间轴特效
2020/11/02 HTML / CSS
Farfetch阿联酋:奢侈品牌时尚购物平台
2019/07/26 全球购物
银行办公室岗位职责
2014/03/10 职场文书
迟到检讨书范文
2015/01/27 职场文书
销售业务员岗位职责
2015/02/13 职场文书
小学生教师节广播稿
2015/08/19 职场文书
大学生村官驻村工作心得体会
2016/01/23 职场文书
小学语文教学反思范文
2016/03/03 职场文书
创业计划书之婴幼儿游泳馆
2019/09/11 职场文书
如何使用Maxwell实时同步mysql数据
2021/04/08 MySQL