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的兼容性问题