<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"
DataKey
names="ID" DataSourc
eiD="
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:Boun
DField DataField="ID" HeaderText="ID" InsertVisible="False"
ReadOnly="True" SortEx
Pression="ID" />
<asp:BoundField DataField="num" HeaderText="num" SortEx
PRession="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,Event
args e)
{
CheckBox ck = sender as CheckBox;
if (ck != null)
{
System.Web.UI.WebControls.GridView g = ck.N
amingCont
ainer.N
amingContainer as System.Web.UI.WebControls.GridView;
for (Int32 i = 0; 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 = 0;
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 = 0; 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也不选中。
<script ty
PE="text/javascript">
$(function() {
$("
#GridView1 :checkbox").eq(0).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 - 1) {
$("#GridView1 :checkbox").eq(0).attr("checked", "checked");
}
}
else {
$("#GridView1 :checkbox").eq(0).removeAttr("checked");
}
});
});
</script>