gridview 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 = 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也不选中。
下面来说说客户端的实现:
html代码部分，请去除掉两个checkbox的oncheckedchanged和autopostback。其他的不变。

<script type="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>