gridview checkbox从服务器端和客户端两个方面实现全选和反选
GridView中的checkbox的全选和反选在很多的地方都是要求实现的，所以下面就从服务器端和客户端两个方面实现了checkbox的选择,感兴趣的朋友可以了解下，希望本文对你有所帮助
GridView中的checkbox的全选和反选在很多的地方都是要求实现的，所以下面就从服务器端和客户端两个方面实现了checkbox的选择。
1.服务器端
html代码如下：
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
DataKeyNames="ID" DataSourceID="SqlDataSource1">
<Columns>
<asp:TemplateField>
<HeaderTemplate>
<asp:CheckBox ID="CheckAll" runat="server" OnCheckedChanged="CheckAll_CheckedChanged" AutoPostBack="true" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" AutoPostBack="true" OnCheckedChanged="CheckBox1_CheckedChanged" />
</ItemTemplate>
</asp:TemplateField>
<asp:BoundField DataField="ID" HeaderText="ID" InsertVisible="False"
ReadOnly="True" SortExpression="ID" />
<asp:BoundField DataField="num" HeaderText="num" SortExpression="num" />
</Columns>
</asp:GridView>
其中关于数据的获取不是重点，所以就选择了使用sqldatasource控件来实现数据的获取。 GridView中使用了BoundField绑定了ID,num这两个数据表的字段。在上面的HTML代码中，使用了模板列
<asp:TemplateField>
<HeaderTemplate>
<asp:CheckBox ID="CheckAll" runat="server" OnCheckedChanged="CheckAll_CheckedChanged" AutoPostBack="true" />
</HeaderTemplate>
<ItemTemplate>
<asp:CheckBox ID="CheckBox1" runat="server" AutoPostBack="true" OnCheckedChanged="CheckBox1_CheckedChanged" />
</ItemTemplate>
</asp:TemplateField>
header部分是全选的checkbox，item的部分是单个的checkbox部分。 (请注意AutoPostBack要设置为true，要不然无法触动服务器端的代码)
具体的后台的代码：
protected void CheckAll_CheckedChanged(object sender,EventArgs e)
{
CheckBox ck = sender as CheckBox;
if (ck != null)
{
System.Web.UI.WebControls.GridView g = ck.NamingContainer.NamingContainer as System.Web.UI.WebControls.GridView;
for (Int32 i = ; i < g.Rows.Count; i++)
{
(g.Rows[i].FindControl("CheckBox1") as CheckBox).Checked = ck.Checked;
}
}
}
protected void CheckBox1_CheckedChanged(object sender,EventArgs e)
{
var count = ;
CheckBox ck = sender as CheckBox;
if (ck != null)
{
System.Web.UI.WebControls.GridView g = ck.NamingContainer.NamingContainer as System.Web.UI.WebControls.GridView;
for (Int32 i = ; i < g.Rows.Count; i++)
{
if ((g.Rows[i].FindControl("CheckBox1") as CheckBox).Checked)
{
count++;
}
}
(g.HeaderRow.FindControl("CheckAll") as CheckBox).Checked =count==g.Rows.Count;
}
}
运行页面以后，可以看到点击全选的checkbox,可以选择全部。取消了全选的checkbox，那所以的checkbox也取消选中。如果单个的checkbox全选中一个，那全选的checkbox也选中。如果有一个单个的checkbox没有选中，那全选的checkbox也不选中。
2.客户端的实现:
html代码部分，请去除掉两个checkbox的OnCheckedChanged和AutoPostBack。其他的不变。
<script type="text/javascript">
$(function() {
$("#GridView1 :checkbox").eq().click(function() {
if ($(this).is(":checked")) {
$(this).parent().parent().nextAll().find(":checkbox").attr("checked", "checked");
}
else {
$(this).parent().parent().nextAll().find(":checkbox").removeAttr("checked");
}
});
$("#GridView1 :checkbox").not($("#GridView1 :checkbox:first")).click(function() {
if ($(this).is(":checked")) {
if ($("#GridView1 :checked").length == $("#GridView1 :checkbox").length - ) {
$("#GridView1 :checkbox").eq().attr("checked", "checked");
}
}
else {
$("#GridView1 :checkbox").eq().removeAttr("checked");
}
});
});
</script>
3.普通的html界面的全选与反选
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="jquery-1.7.1.min.js"></script>
<script>
//复选框事件
//全选、取消全选的事件
function selectAll() {
if ($("#SelectAll").attr("checked")) {
$(":checkbox").attr("checked", true);
} else {
$(":checkbox").attr("checked", false);
}
}
//子复选框的事件
function setSelectAll() {
//当没有选中某个子复选框时，SelectAll取消选中
if (!$("#subcheck").checked) {
$("#SelectAll").attr("checked", false);
}
var chsub = $("input[type='checkbox'][id='subcheck']").length; //获取subcheck的个数
var checkedsub = $("input[type='checkbox'][id='subcheck']:checked").length; //获取选中的subcheck的个数
if (checkedsub == chsub) {
$("#SelectAll").attr("checked", true);
}
}
</script>
</head>
<body>
<input type="checkbox" id="SelectAll" value="全选" onclick="selectAll();" />
<input type="checkbox" id="subcheck" value="" onclick="setSelectAll();" />
<input type="checkbox" id="subcheck" value="" onclick="setSelectAll();" />
<input type="checkbox" id="subcheck" value="" onclick="setSelectAll();" />
<input type="checkbox" id="subcheck" value="" onclick="setSelectAll();" />
</body>
</html>
4.使用prop属性实现checkbox的全选与反选
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script src="Scripts/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#checkAll").click(function () {
if ($(this).prop("checked")) {
$("input[name='selectFlag']:checkbox").prop("checked", true);
} else {
$("input[name='selectFlag']:checkbox").prop("checked", false)
}
});
});
//子复选框的事件
function setSelectAll() {
//当没有选中某个子复选框时，SelectAll取消选中
if (!$("#selectFlag").checked) {
$("#checkAll").attr("checked", false);
}
var chsub = $("input[type='checkbox'][id='selectFlag']").length; //获取subcheck的个数
var checkedsub = $("input[type='checkbox'][id='selectFlag']:checked").length; //获取选中的subcheck的个数
if (checkedsub == chsub) {
$("#checkAll").attr("checked", true);
}
}
</script>
</head>
<body>
<table>
<tr>
<td><input type="checkbox" name="selectFlag" id="checkAll"></td>
</tr>
<tr>
<td><input type="checkbox" name="selectFlag" id="selectFlag" onclick="setSelectAll()"></td>
</tr>
<tr>
<td><input type="checkbox" name="selectFlag" id="selectFlag" onclick="setSelectAll()"></td>
</tr>
<tr>
<td><input type="checkbox" name="selectFlag" id="selectFlag" onclick="setSelectAll()"></td>
</tr>
<tr>
<td><input type="checkbox" name="selectFlag" id="selectFlag" onclick="setSelectAll()"></td>
</tr>
<tr>
<td><input type="checkbox" name="selectFlag" id="selectFlag" onclick="setSelectAll()"></td>
</tr>
</table>
</body>
</html>
gridview checkbox从服务器端和客户端两个方面实现全选和反选的更多相关文章
- checkbox的全选与反选
最近在做一个项目,其中一个功能就是多选框的全选与反选.感觉很简单的小功能,一下子想不起来怎么实现了,很是耽误时间.我在想,我有必要整理下自己的一些小demo了,也方便以后再使用的时候能快速的完成功能. ...
- 通过VBA实现checkbox的全选和反选
checkbox的全选和反选可以通过VBA来控制,这种设计常见于一些交互式报表,代码如下: 1.分成两个IF判断 Private Sub CheckBox1_Click() ‘checkbox为总控 ...
- vue中的checkbox全选和反选
前几天有个博客园的朋友问小颖,小颖之前写的vue2.0在table中实现全选和反选 .Vue.js实现checkbox的全选和反选,为什么他将里面的js复制下来,但是实现不了全选和反选.小颖当时看他 ...
- jQuery checkbox的全选与反选
1:checkbox的全选与反选 js 代码 $("#cbAll").click(function(){ if($("#cbAll").is(":ch ...
- 关于checkbox的全选和反选实例
<script type="text/javascript"> $(function () { $("#checkAll").click(funct ...
- 关于checkbox全选与反选的问题
在一组checkbox中常有这样的需求,选择全选按钮,所有的选项必须全选上,当再次点击时,则所有的按钮必须反选,当点击一组checkbox时,只有有一个不选上,则按钮不选中,当所有的按钮全部选上时,此 ...
- checkbox全选，反选，取消选择 jquery
checkbox全选,反选,取消选择 jquery. //checkbox全部选择 $(":checkbox[name='osfipin']").each(function(){ ...
- checkbox全选与反选
用原生js跟jquery实现checkbox全选反选的一个例子 原生js: <!DOCTYPE html> <html lang="en"> <hea ...
- checkbox 全选，反选 ，全不选
在表格或者列表中经常会遇到要全选或者反选等交互,今天总结了一下代码,保留着以后直接拿来用 原理: 1. 全选:当全选checkbox被点击(不管点击之前是什么状态)后,获取其checked状态.然后对 ...
随机推荐
- 如何优化cocos2d程序的内存使用和程序大小：第二部分_（转）
减少你的程序的大小 把纹理的颜色位深度减少到16位,不仅可以减少内存压力,还可以有效地减少程序的体积.但是,我们还有其它方法可以更进一步地减少程序的大小. TexturePacker PNG 图片优化 ...
- Activity透明/半透明效果的设置transparent(两种实现方法)
两种方法实现Activity透明/半透明效果的设置,代码思路很有调理,感兴趣的朋友可以参考下,希望本文可以帮助到你 方法一:res/values文件夹下建立styles.xml: 复制代码代码如下 ...
- Servlet 第六课： Session的使用
课程目标: 通过这节课,我们能够学会加入session,学会调用session,以及大概懂得session存在的情况. 课程具体: 1.Session仅仅是存在于浏览器.比方我们打开浏览器获得我们所须 ...
- C. Tourist Problem
http://codeforces.com/problemset/problem/340/C 赛时没想出赛后却能较快想出深深的教育自己做题一定要静下心来,不要轻易放弃,认真思考,不要浮躁着急,不要太容 ...
- [AngularJS] Default Child state and nav between child state
Let's say we want a parent state which is a abstract state. Two children states, one is for sinlge a ...
- Android 颜色渲染(四) BitmapShader位图渲染
版权声明:本文为博主原创文章,未经博主允许不得转载. Android 颜色处理(四) BitmapShader位图渲染 public BitmapShader(Bitmap bitmap,Shad ...
- android中listview的一些样式设置
在Android中,ListView是最常用的一个控件,在做UI设计的时候,很多人希望能够改变一下它的背景,使他能够符合整体的UI设计,改变背景背很简单只需要准备一张图片然后指定属性 android: ...
- 常用Content-type汇总
Content-Type,内容类型,用于定义网络文件的类型和网页的编码,决定浏览器将以什么形式.什么编码读取这个文件.这里汇总一下常用的,所有资料来源于网络,未经测试: 文件后缀 处理方式 .* ...
- 前端工具之WebPack解密--使用
接上一篇的内容继续来说,背景篇的内容主要是介绍web前端工具的出现的原因和当前主要JavaScript模块化编程的几种规范!这篇内容主要介绍webpack的初级使用! 注意:目前webpack分为两个 ...
- 使用AVCaptureSession捕捉视频
#import <UIKit/UIKit.h> #import <AVFoundation/AVFoundation.h> #import <AssetsLibrary/ ...