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从服务器端和客户端两个方面实现全选和反选的更多相关文章

  1. checkbox的全选与反选

    最近在做一个项目,其中一个功能就是多选框的全选与反选.感觉很简单的小功能,一下子想不起来怎么实现了,很是耽误时间.我在想,我有必要整理下自己的一些小demo了,也方便以后再使用的时候能快速的完成功能. ...

  2. 通过VBA实现checkbox的全选和反选

    checkbox的全选和反选可以通过VBA来控制,这种设计常见于一些交互式报表,代码如下: 1.分成两个IF判断 Private Sub CheckBox1_Click()  ‘checkbox为总控 ...

  3. vue中的checkbox全选和反选

    前几天有个博客园的朋友问小颖,小颖之前写的vue2.0在table中实现全选和反选  .Vue.js实现checkbox的全选和反选,为什么他将里面的js复制下来,但是实现不了全选和反选.小颖当时看他 ...

  4. jQuery checkbox的全选与反选

    1:checkbox的全选与反选 js 代码 $("#cbAll").click(function(){ if($("#cbAll").is(":ch ...

  5. 关于checkbox的全选和反选实例

    <script type="text/javascript"> $(function () { $("#checkAll").click(funct ...

  6. 关于checkbox全选与反选的问题

    在一组checkbox中常有这样的需求,选择全选按钮,所有的选项必须全选上,当再次点击时,则所有的按钮必须反选,当点击一组checkbox时,只有有一个不选上,则按钮不选中,当所有的按钮全部选上时,此 ...

  7. checkbox全选，反选，取消选择 jquery

    checkbox全选,反选,取消选择 jquery. //checkbox全部选择 $(":checkbox[name='osfipin']").each(function(){ ...

  8. checkbox全选与反选

    用原生js跟jquery实现checkbox全选反选的一个例子 原生js: <!DOCTYPE html> <html lang="en"> <hea ...

  9. checkbox 全选，反选 ，全不选

    在表格或者列表中经常会遇到要全选或者反选等交互,今天总结了一下代码,保留着以后直接拿来用 原理: 1. 全选:当全选checkbox被点击(不管点击之前是什么状态)后,获取其checked状态.然后对 ...

随机推荐

  1. eclipse有时新建一个PHP文件或者是HTML文件没有快捷键太麻烦了，总要用鼠标点 怎么创建自己的快捷键呢？

    问题:总是在eclipse上编写PHp程序和对应的HMTL模板文件,但是却没有可以直接新PHP文件和HTMl文件的快捷方式,苦恼. 在百度上搜了一下,我们是可以创建自己的组合快捷键的. 创建快捷键的方 ...

  2. 【Android笔记】MediaPlayer基本使用方式

    Android MediaPlayer基本使用方式 使用MediaPlayer播放音频或者视频的最简单样例: JAVA代码部分: public class MediaPlayerStudy exten ...

  3. webservice传递特殊字符时的解决的方法

    webservice soap报文是xml格式交互的,当中针对特殊字符传递无法解析,导致数据处理失败. 解决的方法例如以下: 1.在发送报文之前,针对报文进行base64转码,转义后避免报文中含有特殊 ...

  4. kswapd0、kjournald、pdflush、kblocked、migration进程含义 转

    kswapd0.kjournald.pdflush.kblocked.migration进程含义 1.kswapd0 Linux uses kswapd for virtual memory mana ...

  5. OOP—ECMAScript实现详解

    我们将从最基本的数据类型来分析,首先要了解的是ECMAScript用原始值( primitive values) 和对象 ( objects) 来区分实体, 因此有些文章里说的“在JavaScript ...

  6. 还在用ListView？

    还在用Lisview?RecyclerView都已经出来一年多了! 想必大家多或多或少的接触过或者了解过RecyclerView,为什么没有用起来,原因大概如下? ListView我用的挺好的,为什么 ...

  7. 使用WebSocket构建实时WEB

    为了防止无良网站的爬虫抓取文章,特此标识,转载请注明文章出处.LaplaceDemon/SJQ. http://www.cnblogs.com/shijiaqi1066/p/3795075.html ...

  8. python - 操作RabbitMQ

    python - 操作RabbitMQ     介绍 RabbitMQ是一个在AMQP基础上完整的,可复用的企业消息系统.他遵循Mozilla Public License开源协议.MQ全称为Mess ...

  9. 安装zookeeper时候，可以查看进程启动，但是状态显示报错：Error contacting service. It is probably not running

    安装zookeeper-3.3.2的时候,启动正常没报错,但zkServer.sh status查看状态的时候却出现错误,如下: JMX enabled by defaultUsing config: ...

  10. 使用CDN加载jQuery类库后备代码

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.3/jquery.min.js"></ ...