JavaScript 实现 GriwView 单列全选

　　在 GridView 里有一系列的 Checkbox ，要实现对其全选或全不选。开始在网上找了，但是参考的代码会全选 GridView 里所有的 Checkbox ，而我要的是单列全选。如图：

审核和权限是要分开的。

我自己写了 JavaScript 代码，贴出来供大家参考。

 1 function chkAll(CheckAll) {
 2             var items = document.getElementsByTagName("input");
 3             for (var i = 0; i < items.length; i++) {
 4                 if (items[i].type == "checkbox"){
 5                     for (var j = 2; j < 10; j++) {
 6                         var id = "ctl00_ContentPlaceHolder1_GridView1_ctl0" + j + "_CheckBox1";
 7                         if (items[i].id == id) {
 8                             items[i].checked = CheckAll.checked;
 9                         }
10                     }
11                 }
12             }
13         }

其中，第5行的 j 和第6行的 id 是用来确定同一列的 Checkbox，具体 j 的范围以及 id 可能不同，可以通过 alert(items[i].id); 遍历整个 items 查看相应的 id 。

前台的相应代码如下：

 1 <asp:TemplateField HeaderText="审核">
 2                     <HeaderTemplate>
 3                         <asp:CheckBox ID="chkAll" onclick='chkAll(this)' runat="server" />
 4                         审核
 5                     </HeaderTemplate>
 6                     <ItemTemplate>
 7                         <asp:CheckBox ID="CheckBox1" Checked='<%# Eval("isCheck") %>' runat="server" />
 8                     </ItemTemplate>
 9                     <ItemStyle HorizontalAlign="Center" Width="100px" />
10                 </asp:TemplateField>

转载于:https://www.cnblogs.com/roming/archive/2013/05/13/3075405.html

JavaScript 实现 GriwView 单列全选相关推荐

JavaScript—有关如何实现全选/全不选、检查是否选中了复选框。
一.Javacript设置全选的方法:首先创建一个HTML示例文件:然后添加script标签并创建js代码:最后通过循环遍历每个checkbox对象,将其checked属性设置为true实现全选功能即 ...
html5+css+javascript实现表单全选取消全选
代码如下: <!DOCTYPE html> <html><head lang="en"><meta charset="UTF-8 ...
Javascript实现表格的全选框
这是一个老生常谈的问题了,不过还是拿我的解决办法来晒晒太阳. 最开始我是为Table中的每一项添加属性 class="item1" 的方式实现的 1. 第一种解决方法 <ta ...
js实现表单checkbox的单选，全选
全选&单选 //<input type="checkbox" name="" class="quan" value=" ...
使用jQuery实现全选、全不选、反选(button)
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
实现gridview中checkbox的全选和反选，以及固定gridview列字符串的长度，多余的以...表示...
下面是源码: 先添加js和CSS <script type="text/javascript" language="javascript"> ...
JavaScript 全选函数的实现
Html代码: <table id="purchase-info" class="table table-bordered table-hover table-st ...
Javascript实现复选框(全选反选功能)
在一个项目开发中我们经常见到页面会有复选框的全选和反选功能,这样我们才能够进行下一步的批量删除或者实现其他的功能,那我们应该怎样去实现这样的一个功能呢?其实想要实现复选框的全选和反选功能很简单只要得到 ...
javascript 计算器、动态时钟、表格复选框全选（扩展）、轮播图、36选7、随机数...
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

JavaScript 实现 GriwView 单列全选

JavaScript 实现 GriwView 单列全选相关推荐

最新文章

热门文章