JavaScript实现GriwView单列全选(自写代码)


Posted in Javascript onMay 13, 2013

在 GridView 里有一系列的 Checkbox ,要实现对其全选或全不选。开始在网上找了,但是参考的代码会全选 GridView 里所有的 Checkbox ,而我要的是单列全选。如图:
JavaScript实现GriwView单列全选(自写代码) 
审核和权限是要分开的。
JavaScript实现GriwView单列全选(自写代码) 
JavaScript实现GriwView单列全选(自写代码)
我自己写了 JavaScript 代码,贴出来供大家参考。

function chkAll(CheckAll) { 
var items = document.getElementsByTagName("input"); 
for (var i = 0; i < items.length; i++) { 
if (items[i].type == "checkbox"){ 
for (var j = 2; j < 10; j++) { 
var id = "ctl00_ContentPlaceHolder1_GridView1_ctl0" + j + "_CheckBox1"; 
if (items[i].id == id) { 
items[i].checked = CheckAll.checked; 
} 
} 
} 
} 
}

其中,第5行的 j 和 第6行的 id 是用来确定同一列的 Checkbox,具体 j 的范围以及 id 可能不同,可以通过 alert(items[i].id); 遍历整个 items 查看相应的 id 。
前台的相应代码如下:
<asp:TemplateField HeaderText="审核"> 
<HeaderTemplate> 
<asp:CheckBox ID="chkAll" onclick='chkAll(this)' runat="server" /> 
审核 
</HeaderTemplate> 
<ItemTemplate> 
<asp:CheckBox ID="CheckBox1" Checked='<%# Eval("isCheck") %>' runat="server" /> 
</ItemTemplate> 
<ItemStyle HorizontalAlign="Center" Width="100px" /> 
</asp:TemplateField>
Javascript 相关文章推荐
javascript类继承机制的原理分析
Sep 12 Javascript
JS中window.open全屏命令解析及使用示例
Dec 11 Javascript
jQuery中die()方法用法实例
Jan 19 Javascript
Jquery 分页插件之Jquery Pagination
Aug 25 Javascript
jQuery.extend 函数及用法详细
Sep 06 Javascript
js如何实现淡入淡出效果
Nov 18 Javascript
el表达式 写入bootstrap表格数据页面的实例代码
Jan 11 Javascript
JS中Object对象的原型概念基础
Jan 29 Javascript
微信小程序通过保存图片分享到朋友圈功能
May 24 Javascript
Bootstrap Table列宽拖动的方法
Aug 15 Javascript
JavaScript实现动态留言板
Mar 16 Javascript
JavaScript实现烟花绽放动画效果
Aug 04 Javascript
jquery实现漂浮在网页右侧的qq在线客服插件示例
May 13 #Javascript
js 程序执行与顺序实现详解
May 13 #Javascript
JS/jQuery实现默认显示部分文字点击按钮显示全部内容
May 13 #Javascript
JS 加入收藏夹的代码(主流浏览器通用)
May 13 #Javascript
jQuery实现长文字部分显示代码
May 13 #Javascript
jq选项卡鼠标延迟的插件实例
May 13 #Javascript
jQuery获取CSS样式中的颜色值的问题,不同浏览器格式不同的解决办法
May 13 #Javascript
You might like
PHP 开发环境配置(Zend Server安装)
2010/04/28 PHP
php date()日期时间函数详解
2010/05/16 PHP
php debug 安装技巧
2011/04/30 PHP
php 网上商城促销设计实例代码
2012/02/17 PHP
thinkPHP简单遍历数组方法分析
2016/05/16 PHP
理解Javascript_11_constructor实现原理
2010/10/18 Javascript
jquery 按键盘上的enter事件
2014/05/11 Javascript
js实现横向百叶窗效果网页切换动画效果的方法
2015/03/02 Javascript
简述Matlab中size()函数的用法
2016/03/20 Javascript
JS动态加载脚本并执行回调操作
2016/08/24 Javascript
微信小程序组件 contact-button(客服会话按钮)详解及实例代码
2017/01/10 Javascript
深入理解 JavaScript 中的 JSON
2017/04/06 Javascript
Vue侧滑菜单组件——DrawerLayout
2017/12/18 Javascript
angular6.0使用教程之父组件通过url传递id给子组件的方法
2018/06/30 Javascript
如何把vuejs打包出来的文件整合到springboot里
2018/07/26 Javascript
Vue press 支持图片放大功能的实例代码
2018/11/09 Javascript
详解微信小程序支付流程与梳理
2019/07/16 Javascript
jQuery 动态粒子效果示例代码
2020/07/07 jQuery
Swiper实现导航栏滚动效果
2020/10/16 Javascript
[01:02:34]TFT vs VGJ.T Supermajor 败者组 BO3 第二场 6.5
2018/06/06 DOTA
比较详细Python正则表达式操作指南(re使用)
2008/09/06 Python
让Django支持Sql Server作后端数据库的方法
2018/05/29 Python
Python numpy中矩阵的基本用法汇总
2019/02/12 Python
Python搭建代理IP池实现获取IP的方法
2019/10/27 Python
Python 面向对象静态方法、类方法、属性方法知识点小结
2020/03/09 Python
python实现opencv+scoket网络实时图传
2020/03/20 Python
Keras 快速解决OOM超内存的问题
2020/06/11 Python
如何清空python的变量
2020/07/05 Python
Python WebSocket长连接心跳与短连接的示例
2020/11/24 Python
HTML5之HTML元素扩展(下)—增强的Form表单元素值得关注
2013/01/31 HTML / CSS
应届生服务员求职信
2013/10/31 职场文书
计算机科学与技术应届生求职信
2013/11/07 职场文书
员工合理化建议书
2014/05/19 职场文书
小学生环保标语
2014/06/13 职场文书
医院我们的节日活动实施方案
2014/08/22 职场文书
场地使用证明模板
2014/10/25 职场文书