In this article I will explain with an example, how to dynamically Show Hide GridView Columns on CheckBox Checked Unchecked respectively using jQuery in ASP.Net.
 
HTML Markup
The following HTML Markup consists of an ASP.Net GridView and a CheckBox. The GridView contains two BoundField columns and one TemplateField column.
<asp:CheckBox ID="chkCountry" Text="Show Hide Country" runat="server" Checked="true" />
<hr />
<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
    <Columns>
        <asp:BoundField DataField="Id" HeaderText="Id" ItemStyle-Width="30" />
        <asp:BoundField DataField="Name" HeaderText="Name" ItemStyle-Width="150" />
        <asp:TemplateField HeaderText="Country" ItemStyle-Width="150">
            <ItemTemplate>
                <asp:Label Text='<%# Eval("Country") %>' runat="server" />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>
 
 
Namespaces
You will need to import the following namespace.

C#
using System.Data;
 
VB.Net
Imports System.Data
 
 
Binding the ASP.Net GridView control
The GridView is populated with a dynamic DataTable with some dummy data inside the Page Load event.
Note: You can learn more about this dynamic DataTable in my article Create DataTable dynamically and bind to GridView in ASP.Net.
 
C#
protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[3] { new DataColumn("Id"), new DataColumn("Name"), new DataColumn("Country") });
        dt.Rows.Add(1, "John Hammond", "United States");
        dt.Rows.Add(2, "Mudassar Khan", "India");
        dt.Rows.Add(3, "Suzanne Mathews", "France");
        dt.Rows.Add(4, "Robert Schidner", "Russia");
        GridView1.DataSource = dt;
        GridView1.DataBind();
    }
}
 
VB.Net
Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim dt As New DataTable()
        dt.Columns.AddRange(New DataColumn(2) {New DataColumn("Id"), New DataColumn("Name"), New DataColumn("Country")})
        dt.Rows.Add(1, "John Hammond", "United States")
        dt.Rows.Add(2, "Mudassar Khan", "India")
        dt.Rows.Add(3, "Suzanne Mathews", "France")
        dt.Rows.Add(4, "Robert Schidner", "Russia")
        GridView1.DataSource = dt
        GridView1.DataBind()
    End If
End Sub
 
 
Show Hide ASP.Net GridView Columns on CheckBox Checked Unchecked using jQuery
Inside the jQuery document ready event handler, the CheckBox has been assigned a Click event handler.
When the CheckBox is checked or unchecked, first the TH (GridView Header Cell) element containing the text “Country” is selected and is shown if the CheckBox is checked and hidden if the CheckBox is unchecked.
Using the Index of the TH (GridView Header Cell) element, the Cell at the specified index of each GridView Row is and is shown if the CheckBox is checked and hidden if the CheckBox is unchecked.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $("[id*=chkCountry]").click(function () {
            var isChecked = $(this).is(":checked");
            var th = $("[id*=GridView1] th:contains('Country')");
            th.css("display", isChecked ? "" : "none");
            $("[id*=GridView1] tr").each(function () {
                $(this).find("td").eq(th.index()).css("display", isChecked ? "" : "none");
            });
        });
    });
</script>
 
 
Screenshot
Show Hide ASP.Net GridView Columns on CheckBox Checked Unchecked using jQuery
 
 
Browser Compatibility

The above code has been tested in the following browsers.

Internet Explorer  FireFox  Chrome  Safari  Opera 

* All browser logos displayed above are property of their respective owners.

 
 
Demo
 
 
Downloads