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 相关文章推荐
EXTJS记事本 当CompositeField遇上RowEditor
Jul 31 Javascript
当jQuery遭遇CoffeeScript的时候 使用分享
Sep 17 Javascript
asp.net网站开发中用jquery实现滚动浏览器滚动条加载数据(类似于腾讯微博)
Mar 14 Javascript
jQuery中data()方法用法实例
Dec 27 Javascript
Js调用Java方法并互相传参的简单实例
Aug 11 Javascript
JavaScript中子对象访问父对象的方式详解
Sep 01 Javascript
Bootstrap php制作动态分页标签
Dec 23 Javascript
关于Angular2 + node接口调试的解决方案
May 28 Javascript
自适应布局meta标签中viewport、content、width、initial-scale、minimum-scale、maximum-scale总结
Aug 18 Javascript
JavaScript如何获取到导航条中HTTP信息
Oct 10 Javascript
使用Vue制作图片轮播组件思路详解
Mar 21 Javascript
Vue项目部署在Spring Boot出现页面空白问题的解决方案
Nov 26 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
DOTA2 1月28日更新:监管系统降临刀塔世界
2021/01/28 DOTA
input file获得文件根目录简单实现
2013/04/26 PHP
微信公众号开发之微信公共平台消息回复类实例
2014/11/14 PHP
Thinkphp关闭缓存的方法
2015/06/26 PHP
PHPWind9.0手动屏蔽验证码解决后台关闭验证码但是依然显示的问题
2016/08/12 PHP
laravel解决迁移文件一次删除创建字段报错的问题
2019/10/24 PHP
jQuery 入门级学习笔记及源码
2010/01/22 Javascript
JavaScript中的null和undefined解析
2012/04/14 Javascript
JavaScript学习笔记之Cookie对象
2015/01/22 Javascript
微信公众号支付H5调用支付解析
2016/11/04 Javascript
JS实现类似百叶窗下拉菜单效果
2016/12/30 Javascript
JQuery和HTML5 Canvas实现弹幕效果
2017/01/04 Javascript
AngularJS中的按需加载ocLazyLoad示例
2017/01/11 Javascript
jquery仿京东侧边栏导航效果
2017/03/02 Javascript
JS排序之快速排序详解
2017/04/08 Javascript
使用Math.max,Math.min获取数组中的最值实例
2017/04/25 Javascript
AngularJS双向数据绑定原理之$watch、$apply和$digest的应用
2018/01/30 Javascript
详解基于Vue,Nginx的前后端不分离部署教程
2018/12/04 Javascript
layui 上传图片 返回图片地址的方法
2019/09/26 Javascript
js 计算月/周的第一天和最后一天代码
2020/02/01 Javascript
JavaScript实现手风琴效果
2021/02/18 Javascript
python实现计算资源图标crc值的方法
2014/10/05 Python
Python实现在线暴力破解邮箱账号密码功能示例【测试可用】
2017/09/06 Python
matplotlib subplots 设置总图的标题方法
2018/05/25 Python
python2与python3共存问题的解决方法
2018/09/18 Python
Python基于BeautifulSoup和requests实现的爬虫功能示例
2019/08/02 Python
Django 删除upload_to文件的步骤
2020/03/30 Python
python实现扑克牌交互式界面发牌程序
2020/04/22 Python
conda安装tensorflow和conda常用命令小结
2021/02/20 Python
Expedia意大利旅游网站:酒店、机票和租车预订
2017/10/30 全球购物
结婚邀请函范文
2014/01/14 职场文书
教师敬业奉献模范事迹材料
2014/05/18 职场文书
三八妇女节趣味活动方案
2014/08/23 职场文书
2014年电厂工作总结
2014/12/04 职场文书
离婚民事起诉状
2015/08/03 职场文书
创业计划书之家教托管
2019/09/25 职场文书