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

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

我自己写了 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>

赞 (0)

相关推荐

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

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

    在 GridView 里有一系列的 Checkbox ,要实现对其全选或全不选.开始在网上找了,但是参考的代码会全选 GridView 里所有的 Checkbox ,而我要的是单列全选.如图:  审核和权限是要分开的.  我自己写了 JavaScript 代码,贴出来供大家参考. 复制代码 代码如下: function chkAll(CheckAll) { var items = document.getElementsByTagName("input"); for (var i =

  • JavaScript列表框listbox全选和反选的实现方法

    本文实例讲述了JavaScript列表框listbox全选和反选的实现方法.分享给大家供大家参考.具体分析如下: 通过JS代码对列表框进行全选和反选是经常要操作的,非常具有实用价值. function listboxSelectDeselect(listID, isSelect) { var listbox = document.getElementById(listID); for(var count=0; count < listbox.options.length; count++) {

  • javascript实现简单的全选和反选功能

    javascript实现简单的全选和反选功能

    本文实例讲解了javascript实现简单的全选和反选功能的详细代码,分享给大家供大家参考,具体内容如下 效果图: 具体代码: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>全选反选</title> </head> <body> <input type="butt

  • JavaScript实现表单全选或反选效果

    JavaScript实现表单全选或反选效果

    本文实例为大家分享了JavaScript实现表单全选或反选的具体代码,供大家参考,具体内容如下 表单中常常会用到checkbox复选框,通过复选框做出的列表全选或全不选的效果也是很常见的,比如购物车的商品列表,所以本篇也是对这一种常见功能的选择效果及其底层的实现思路及代码进行介绍.演示与分析,下面上JS代码: <script> // 表单的全选与全不选案例:注:checkbox复选框的checked属性值为true则为选中状态,为false则为未选中状态 var j_cbAll = docum

  • JavaScript实现页面一键全选或反选

    JavaScript实现页面一键全选或反选

    本文实例为大家分享了JavaScript实现页面一键全选或反选的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html>     <head>         <meta charset="utf-8">         <title></title>         <style type="text/css">             .hobby {  

  • 基于JS实现checkbox全选功能实例代码

    基于JS实现checkbox全选功能实例代码

    需求:要求实现点击全选选中所有菜单,再次点击全选取消选中.此功能经常会用户,下面小编给大家分享下实现代码,一起看看吧! 效果图如下: 点击全选之前: 点击全选之后: 再次点击全选之后: 代码如下: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> &l

  • element-plus 下拉框实现全选的示例代码

    element-plus 下拉框实现全选的示例代码

    目录 前言 下拉框的简单使用 全选互斥 下拉框多选 全选互斥的实现 多个下拉框互斥 一般全选的实现 前言 实习确实能学到不少东西,但是学到的东西果然还是需要沉淀下来,不然后面立马又忘记了. 下拉框的简单使用 使用方法还是比较简单的 <el-select v-model="user.name" placeholder="请选择"> <el-option v-for="item in nameList" :key="ite

  • jquery 实现复选框的全选操作实例代码

    jquery 实现复选框的全选操作实例代码 最近做了个需求,需要实现列表复选框的全选/取消全选操作,由于之前对这块不是很了解,所以从网上查了一些资料,虽然有各种实现方法,但没找到直接可以套用的.自己琢磨了下,把功能实现,整理如下. 实现细节如有可改进的地方,不吝赐教. 首先是html部分的代码,这里有一个表格,表格里面有一些选项: <div id="list"> <table> <tr><td>选项1<input type=&quo

  • JS操作input标签属性checkbox全选的实现代码

    废话不多说了,具体代码如下所示: <html> <head> < > function selectAll(){ var checklist = document.getElementsByName ("selected");//获取所有name值为selected的标签 if(document.getElementById("controlAll").checked){//判断当id为controlAll的标签是否被选中 for

  • Javascript实现CheckBox的全选与取消全选的代码

    Javascript实现CheckBox的全选与取消全选的代码

    本文介绍的方法,触发条件独立,可以全选或取消全选指定 name 的 CheckBox , 同一页面可以有多组供全选的 CheckBox ,功能健全,通用性较强. 效果图:运行查看效果: function checkAll(name) { var el = document.getElementsByTagName('input'); var len = el.length; for(var i=0; i 字母全选开关 a b c d e f g 数字全选开关 1 2 3 [Ctrl+A 全选 注

随机推荐