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.