Dynamically add rows to GridView on Button click using JavaScript and jQuery in ASP.Net

HTML:

<form id="form1" runat="server">
    <div>
        <asp:CheckBoxList ID="CheckBoxList1" onclick="oncheckedchange();" runat="server">
            <asp:ListItem Text="One" />
            <asp:ListItem Text="Two" />
            <asp:ListItem Text="Three" />
        </asp:CheckBoxList>
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
            <Columns>
                <asp:BoundField DataField="Name" HeaderText="Name" />
                <asp:BoundField DataField="State" HeaderText="State" />
            </Columns>
        </asp:GridView>
    </div>
    </form>

C#:

protected void Page_Load(object sender, EventArgs e)
    {
        DataTable dt = new DataTable();
        dt.Columns.AddRange(new DataColumn[2]{new DataColumn("Name",typeof(string)),
                                              new DataColumn("State",typeof(string))});

        dt.Rows.Add("Azim", "Maharashtra");
        dt.Rows.Add("Sajid", "Gujrat");
        dt.Rows.Add("Kalpesh", "Kernatak");
        this.GridView1.DataSource = dt;
        this.GridView1.DataBind();
    }

Using Java Script:

<form id="form1" runat="server">
    <div>
        <asp:CheckBoxList ID="CheckBoxList1" onclick="oncheckedchange();" runat="server">
            <asp:ListItem Text="One" />
            <asp:ListItem Text="Two" />
            <asp:ListItem Text="Three" />
        </asp:CheckBoxList>
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="false">
            <Columns>
                <asp:BoundField DataField="Name" HeaderText="Name" />
                <asp:BoundField DataField="State" HeaderText="State" />
            </Columns>
        </asp:GridView>
    </div>
    </form>

Using JQuer:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            $("[id*=GridView1] tr").filter(":not(:first)").hide();
            $('[id*=CheckBoxList1] input').change(function () {
                var count = $("#CheckBoxList1").find("input:checked").length;
                $("[id*=GridView1] tr").filter(":not(:first)").hide();
                for (var i = 0; i < count; i++) {
                    row = $("[id*=GridView1] tr:nth-child(" + (i + 2) + ")").show();
                }
            });
        });
    </script>

Thank You.