The gridview checkbox selects both the server side and the client side.

Full and inverse selection of the checkbox in the GridView are required in many places. Therefore, the checkbox selection is implemented from the server side and the client side.
1. Server Side:
The html code is as follows:
Copy codeThe Code is as follows:
<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 = "checkbox#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>
The data acquisition is not the focus, so we chose to use the sqldatasource Control for data acquisition. In the GridView, BoundField is used to bind the ID and num fields of the two data tables. In the preceding HTML code, the template column is used.
<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 = "checkbox#checkedchanged"/>
</ItemTemplate>
</Asp: TemplateField>

The header part is the fully selected checkbox, and the item part is the single checkbox part. (Please note that AutoPostBack must be set to true, otherwise the server code cannot be touched)
Specific Background code:
Copy codeThe Code is as follows:
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 checkbox#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;
}
}

After running the page, you can see all selected checkboxes and select all. If all the selected checkboxes are canceled, the checkbox is also deselected. If one checkbox is selected, all checkboxes are also selected. If a single checkbox is not selected, all the checkboxes are not selected.
The implementation of the client is as follows::
In the html code section, remove the OnCheckedChanged and AutoPostBack of the two checkboxes. Others remain unchanged.
Copy codeThe Code is as follows:
<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>