CheckBox Checked Change Event in Jquery

In the below code sample i'm going to show you how to hide/show a GridView control in CheckBox checked change event in Jquery.

Add a GridView to your web page and bind some sample data to it. I'm not going to show how to bind data to GridView here.

<input type="checkbox" value="Show/Hide GridView" id="chkGrid" />

<asp:GridView ID="GridView1" runat="server">
</asp:GridView>

Add the below jquery code inside the page header tags.

<script src="jquery-1.8.3.js" type="text/javascript"></script>

    <title></title>
    <script type="text/javascript">
        $(document).ready(function () {
            $("#GridView1").hide(); // Hide Grid on initial page load
            $("#chkGrid").change(function () {
                if (this.checked) {
                    $("#GridView1").show(); // Show Grid
                }
                else {
                    $("#GridView1").hide(); // Hide Grid
                }
            });
        });
</script>