datagrid添加全选和反选按钮（复选框）

在datagrid外添加全选和反选按钮，可以全选或者反选datagrid内的复选框datagrid

解决方案 »

  1.   

    你生成的代码还是checkbox嘛
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
    <title>test</title>
    <script>
    function CheckAll(value,obj)  {
    var form=document.getElementsByTagName("form")
     for(var i=0;i<form.length;i++){
        for (var j=0;j<form[i].elements.length;j++){
        if(form[i].elements[j].type=="checkbox"){
        var e = form[i].elements[j];
        if (value=="selectAll"){e.checked=obj.checked}
        else{e.checked=!e.checked;}
           }
        }
     }
    }
    </script>
    </head>
    <body>
    <form name="c" method="post" action="<#ZC_BLOG_HOST#>?cat=2">
    <input name="id" type="checkbox" id="id" value="1">
    <input name="id" type="checkbox" id="id" value="2">
    <input name="id" type="checkbox" id="id" value="3">
    <input name="id" type="checkbox" id="id" value="4">
    </form>
    <form name="<#ZC_BLOG_HOST#>?cat=11" method="post" action="">
    <input name="id" type="checkbox" id="id" value="5">
    <input name="id" type="checkbox" id="id" value="6">
    <input name="id" type="checkbox" id="id" value="7">
    <input name="id" type="checkbox" id="id" value="8">
    </form>
    <INPUT onclick=CheckAll('selectAll',this) type=checkbox value=on name=chkall>
    全选
    <input type="checkbox" name="invest" value="checkbox" onClick="CheckAll()">
    反选
    </body>
    </html>
      

  2.   

    //全选，全不选
    function checkAll(obj) {
        var tt = document.getElementsByTagName("input");
        for (var i = 0; i < tt.length; i++) {
            if (tt[i].type == "checkbox") {
                if (obj.checked == true) {
                    tt[i].checked = true;
                }
                if (obj.checked == false) {
                    tt[i].checked = false;
                }
            }
        }
    }
     全选<input name="checkbox3" type="checkbox" class="fxk" value="checkbox" onclick="checkAll(this)" />
    //控件中的CheckBox
    <asp:CheckBox ID="cbCheck" runat="Server" name="cbCheck" />
      

  3.   

     <asp:GridView ID="GridView1" AutoGenerateColumns="false" runat="server" >
                                    <Columns>
                                        <asp:TemplateField ShowHeader="False">
                                            <ItemTemplate>
                                                <asp:CheckBox ID="CheckBox1" runat="server" />
                                            </ItemTemplate>
                                        </asp:TemplateField>
                                        <asp:BoundField DataField="ID" HeaderText="编号" />全选代码
    int index = gvNewsComment.PageIndex;
                    int count = gvNewsComment.PageSize;
                    int start = count * index;
                    for (; start < start + count; start++)//全选当前页
                    {
                        CheckBox cbox = (CheckBox)gvNewsComment.Rows[start].FindControl("CheckBox1");
                        if (ckSelectAll.Checked == true)
                        {
                            cbox.Checked = true;
                        }
                        else { cbox.Checked = false; }
                    }
      

  4.   

    datagrid 生成的复选框id都是有规律的 你触发全选的事件时 获取所有的复选框 设置他们的checked属性就行了啊比如 给所有的复选框增加一个class类然后 
    //全选与反全选
            $("#chkall").change(function () {
                if (this.checked) {
                    $(".chk_edit").each(function () {
                        this.checked = true;
                    });
                } else {
                    $(".chk_edit").each(function () {
                        this.checked = false;
                    });
                }
            });