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 单引号 传递方法
Jun 22 Javascript
Javascript表达式中连续的 &amp;&amp; 和 || 之赋值区别
Oct 17 Javascript
使用js操作cookie的一点小收获分享
Sep 03 Javascript
jquery 取子节点及当前节点属性值的方法
Aug 24 Javascript
node.js实现爬虫教程
Aug 25 Javascript
微信小程序 canvas API详解及实例代码
Oct 08 Javascript
bootstrap timepicker在angular中取值并转化为时间戳
Jun 13 Javascript
浅谈通过JS拦截 pushState和replaceState事件
Jul 21 Javascript
js中时间格式化的几种方法
Jul 22 Javascript
深入理解javascript prototype的相关知识
Sep 19 Javascript
Vue.js下拉菜单组件使用方法详解
Oct 19 Javascript
vue-cli3项目升级到vue-cli4 的方法总结
Mar 19 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数据库链接类(PDO+Access)实例分享
2013/12/05 PHP
Yii编程开发常见调用技巧集锦
2016/07/15 PHP
Django 标签筛选的实现代码(一对多、多对多)
2018/09/05 PHP
JavaScript具有类似Lambda表达式编程能力的代码(改进版)
2010/09/14 Javascript
javascript题目,重写函数让其无限相加
2012/02/15 Javascript
jQuery 文本框得失焦点的简单实例
2014/02/19 Javascript
JavaScript设计模式之外观模式实例
2014/10/10 Javascript
AngularJS语法详解(续)
2015/01/23 Javascript
jquery简单实现网页层的展开与收缩效果
2015/08/07 Javascript
纯HTML5制作围住神经猫游戏-附源码下载
2015/08/23 Javascript
javascript判断网页是关闭还是刷新
2015/09/12 Javascript
关于安卓手机微信浏览器中使用XMLHttpRequest 2上传图片显示字节数为0的解决办法
2016/05/17 Javascript
VueJs 搭建Axios接口请求工具
2017/11/20 Javascript
vue项目在安卓低版本机显示空白的原因分析(两种)
2018/09/04 Javascript
玩转Koa之koa-router原理解析
2018/12/29 Javascript
JavaScript键盘事件常见用法实例分析
2019/01/03 Javascript
详解vue 在移动端体验上的优化解决方案
2019/05/20 Javascript
vue+elementUi图片上传组件使用详解
2019/08/20 Javascript
使用Kivy将python程序打包为apk文件
2017/07/29 Python
浅谈Html5页面打开app的一些思考
2020/03/30 HTML / CSS
选购国际女性时装设计师品牌:IFCHIC(支持中文)
2018/04/12 全球购物
机械电子工程专业推荐信范文
2013/11/20 职场文书
毕业实习个人鉴定范文
2013/12/10 职场文书
吸烟检讨书2000字
2014/02/13 职场文书
《与象共舞》教学反思
2014/02/24 职场文书
爱之链教学反思
2014/04/30 职场文书
数学兴趣小组活动总结
2014/07/08 职场文书
推广活动策划方案
2014/08/23 职场文书
银行员工犯错检讨书
2014/09/16 职场文书
领导干部整治奢华浪费之风思想汇报
2014/10/07 职场文书
房屋所有权证明
2014/10/20 职场文书
会议欢迎词
2015/01/23 职场文书
复试通知单模板
2015/04/24 职场文书
python plt.plot bar 如何设置绘图尺寸大小
2021/06/01 Python
详解Python中的进程和线程
2021/06/23 Python
A22国内电台短波广播频率表
2022/05/10 无线电