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 相关文章推荐
Maps Javascript
Jan 22 Javascript
jQuery代码优化 遍历篇
Nov 01 Javascript
关闭浏览器输入框自动补齐 兼容IE,FF,Chrome等主流浏览器
Feb 11 Javascript
关于事件mouseover ,mouseout ,mouseenter,mouseleave的区别
Oct 12 Javascript
JS常见问题之为什么点击弹出的i总是最后一个
Jan 05 Javascript
JS表格组件BootstrapTable行内编辑解决方案x-editable
Sep 01 Javascript
详解PHP中pathinfo()函数导致的安全问题
Jan 05 Javascript
js获取一组日期中最近连续的天数
May 25 Javascript
JS库 Highlightjs 添加代码行号的实现代码
Sep 13 Javascript
Vue-cli项目获取本地json文件数据的实例
Mar 07 Javascript
webpack热模块替换(HMR)/热更新的方法
Apr 05 Javascript
jQuery中元素选择器(element)简单用法示例
May 14 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
PHP+JS+rsa数据加密传输实现代码
2011/03/23 PHP
php中使用getimagesize获取图片、flash等文件的尺寸信息实例
2014/04/29 PHP
浅析php-fpm静态和动态执行方式的比较
2016/11/09 PHP
PHP集成环境XAMPP的安装与配置
2018/11/13 PHP
Json对象与Json字符串互转(4种转换方式)
2013/03/27 Javascript
javascript正则表达式使用replace()替换手机号的方法
2015/01/19 Javascript
jquery网页日历显示控件calendar3.1使用详解
2016/11/24 Javascript
JS实现页面打印功能
2017/03/16 Javascript
AngularJs+Bootstrap实现漂亮的计算器
2017/08/10 Javascript
详解Layer弹出层样式
2017/08/21 Javascript
Vue-cli3简单使用(图文步骤)
2019/04/30 Javascript
nodejs实现日志读取、日志查找及日志刷新的方法分析
2019/05/20 NodeJs
微信小程序如何使用globalData的方法
2019/06/06 Javascript
微信小程序与公众号卡券/会员打通的问题
2019/07/25 Javascript
vue-autoui自匹配webapi的UI控件的实现
2020/03/20 Javascript
jquery实现鼠标悬浮弹出气泡提示框
2020/12/23 jQuery
Python简单连接MongoDB数据库的方法
2016/03/15 Python
Python 创建空的list,以及append用法讲解
2018/05/04 Python
浅谈Python爬虫基本套路
2019/03/25 Python
python圣诞树编写实例详解
2020/02/13 Python
纯CSS和jQuery实现的在页面顶部显示的进度条效果2例(仿手机浏览器进度条效果)
2014/04/16 HTML / CSS
贝玲妃英国官网:Benefit英国
2018/02/03 全球购物
新秀丽官方旗舰店:Samsonite拉杆箱、双肩包、皮具
2018/03/05 全球购物
经贸日语专业个人求职信
2013/12/13 职场文书
企业演讲稿范文
2013/12/28 职场文书
党员岗位承诺口号大全
2014/03/28 职场文书
学习保证书范文
2014/04/30 职场文书
党员一帮一活动总结
2014/07/08 职场文书
群众路线个人自我剖析材料
2014/10/07 职场文书
2014年辅导员工作总结
2014/11/18 职场文书
综合测评自我评价
2015/03/06 职场文书
2019入党申请书格式和范文
2019/06/25 职场文书
实习员工转正的评语汇总,以备不时之需
2019/12/17 职场文书
Python的代理类实现,控制访问和修改属性的权限你都了解吗
2022/03/21 Python
Nebula Graph解决风控业务实践
2022/03/31 MySQL
table设置超出部分隐藏,鼠标移上去显示全部内容的方法
2022/12/24 HTML / CSS