GridView模板中用Checkbox实现全选删除

在GridView中通过在模板项中添加Checkbox可以实现全选要删除的记录。

下面分享几种实现全选的方法,以下是GridView前台代码，在模板中我放了三个Checkbox，以用三种方法实现（我也是学习，所以都拿出来了），随便用一种都可实现此功能：

<asp:GridView ID="gvProp" runat="server" AutoGenerateColumns="False">
            <Columns>
                <asp:TemplateField HeaderText="全选">
                    <HeaderTemplate>
                        <input type="checkbox" id="Checkbox2" runnat="server"   onclick="CheckAll(this)" />全选3
                        <input type="checkbox" id="chkAllProp"  runat="server" onclick="CheckBoxAll()" />全选
                        <input type="checkbox" id="Checkbox1"   onclick="CheckBoxAllHtml()" />全选2
                    </HeaderTemplate>
                    <ItemTemplate>
                        <asp:CheckBox ID="chkProp" runat="server" />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:BoundField DataField="PropID" HeaderText="属性ID" />
                <asp:BoundField DataField="PropName" HeaderText="属性名称" />
                <asp:BoundField DataField="PropDesc" HeaderText="属性描述" />
                <asp:BoundField DataField="CategoryName" HeaderText="类别名称" />
                <asp:BoundField DataField="CategoryID" HeaderText="类别ID" Visible="false" />
                <asp:TemplateField HeaderText="编辑">
                    <ItemTemplate>
                        <img id="imgEdit" src="Images/manage_25X25.gif" />
                    </ItemTemplate>
                </asp:TemplateField>
                <asp:TemplateField HeaderText="删除">
                    <ItemTemplate>
                        <asp:ImageButton ID="imgBtnDel" runat="server" ImageUrl="~/Images/delete_25X25.gif" />
                    </ItemTemplate>
                </asp:TemplateField>
            </Columns>
        </asp:GridView>

如果在模板项中放的是Asp.Net服务器端控件，用js实现如下 ，

 

//第一个方法CheckAll(oCheckbox) 为id="Checkbox2"的对应实现的方法

function CheckAll(oCheckbox)
{

    var gv = document.getElementById("<%=gvProp.ClientID %>");
    for(i = 1;i<gv.rows.length;i++)
    {
        gv.rows[i].cells[0].getElementsByTagName("input")[0].checked = oCheckbox.checked;   //可以解决兼容性问题
    }
    //ctl00$PlaceHolder1$gvProp$ctl01$chkAllProp
}

 

//以下两个方法是用JQuery来实现的，所以需要引入  jquery-1.3.2.min.js   （这个JQuery库，或更高版本）

//<script type="text/javascript" src="JS/jquery-1.3.2.min.js"></script>

//下面第二个方法 为ID为id="chkAllProp"的对应实现方法

function CheckBoxAll()
{
   
    if($("input[id*='chkAllProp']").attr("checked")==true)
    {
        $(":checkbox:not(input[id*='chkAllProp'])").attr("checked",true);
    }
      else
    {
        $(":checkbox:not(input[id*='chkAllProp'])").attr("checked",false);//chkAllProp为服务器控件，ID会变
    }
    //else
   // { 
   //     $(":checkbox").attr("checked",false);
   // }
   
}

 

//下面第三个方法为ID="Checkbox1"对应实现的方法。

function CheckBoxAllHtml()
{
    if($("#Checkbox1").attr("checked")==true)
    {
        $(":checkbox:not(input[id='Checkbox1')").attr("checked",true);
    }
    else
    {
        $(":checkbox:not(input[id='Checkbox1')").attr("checked",false);//排除ID为checkbox1的控件。Html控件ID不会变
    }
}

</script>

注释：

1、

$("input[id*='chkAllProp']").attr("checked")==true

*=为jquery中的通配符，因为 如果控件为 服务器的控件，解析成HTML控件时，前面会有一长串字符串，自身的ID会在最后面，所以，为id包括这些字符的，即为所得的控件

 

2、

$(":checkbox:not(input[id*='chkAllProp'])").attr("checked",true);

:checkbox此的意思为包括所有的checkbox控件

:not() 即为要排除的项

上面的意思即为设置 除id包括chkAllProp字符的 Checkbox 的checked属性的值为true.

 

3、js得到服务器控件ID或值的办法<%=gvProp.ClientID %>;

var gv = document.getElementById("<%=gvProp.ClientID %>");

 

第四个方法（针对Asp.Net）服务器控件）如chkAllProp为服务器控件CheckBox

protected void chkAllProp_CheckedChanged(object sender, EventArgs e)
{
        CheckBox chkAll = (CheckBox)sender;
        foreach (GridViewRow gv in gvProp.Rows)
        {
            CheckBox chk = (CheckBox)gv.FindControl("chkProp");
            chk.Checked = chkAll.Checked;
        }
}

 

 

方法四：20140815

function checkAllRecord()

{
　　var varCheck = window.document.getElementById("checkAll");
　　var ChangeState = varCheck.checked;
　　var dataGrid = window.document.getElementById("<%=GridView1.ClientID %>");
　　for (var i = 1; i < dataGrid.rows.length; i++) // 从第一行数据改变checkbox选中状态
　　{
　　　　dataGrid.rows[i].cells[1].getElementsByTagName('input')[0].checked = ChangeState;
　　}
}

 //dataGrid.rows[i].cells[1].getElementsByTagName('input')[0].checked = ChangeState; 可以有效的解决 IE ， Firefox的兼容性问题