The checkbox in the GridView selection and reverse selection in many places is required to implement, so the following from the server side and the client two aspects of the implementation of the checkbox selection.
1. Server-side：
The HTML code is as follows:
Copy Code code 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= "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>
The acquisition of data is not the focus, so the use of the SqlDataSource control is chosen to achieve data acquisition. A field in the GridView using the BoundField bound id,num these two data tables is used. In the above HTML code, a 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= "checkbox1_checkedchanged"/ >
</ItemTemplate>
</asp:TemplateField>
The header portion is an optional checkbox,item part of a single checkbox. (Note that AutoPostBack is set to True, otherwise the server-side code cannot be touched)
Specific background Code：
Copy Code code 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 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;
}
}
After running the page, you can see all the selected checkbox, you can select all. All selected checkbox is canceled, so the checkbox is also unchecked. If a single checkbox is all selected, the selected checkbox is also selected. If a single checkbox is not selected, the selected checkbox is not selected.
Let's say the implementation of the client:
HTML code section, please remove the oncheckedchanged and AutoPostBack of the two checkbox. The other is unchanged.
Copy Code code as follows:
<script type= "Text/javascript" >
$ (function () {
$ ("#GridView1: CheckBox"). EQ (0). Click (function () {
if ($ (this). Is (": Checked")) {
$ (this). Parent (). Nextall (). Find (": CheckBox"). attr ("Checked", "checked");
}
else {
$ (this). 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>
