Hide Show ASP.Net DataList based on CheckBox Checked (Selected) using C# and VB.Net

Hi nid@patel,

Refer below sample.

HTML

<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript">
    $(function () {
        $('input[type=checkbox]').click(function () {
            var id = $(this)[0].id.toString().replace('CheckBox', '');
            if ($(this).is(":checked")) {
                $('#DataList' + id).hide();
            }
            else {
                $('#DataList' + id).show();
            }
        });
    });
</script>
<div>
    <div>
        <div class="dropdown">
            <div class="dropdown-content">
                <a href="#">
                    <asp:CheckBox ID="CheckBox1" runat="server" />Nozzle</a> <a href="#">
                        <asp:CheckBox ID="CheckBox2" runat="server" />Lateral</a> <a href="#">
                            <asp:CheckBox ID="CheckBox3" runat="server" />Submain Pipe</a> <a href="#">
                                <asp:CheckBox ID="CheckBox4" runat="server" />Main Pipe</a> <a href="#">
                                    <asp:CheckBox ID="CheckBox5" runat="server" />Motor Pump</a>
            </div>
        </div>
        <hr />
        <asp:DataList ID="DataList1" runat="server" BorderStyle="Double">
            <ItemTemplate>
                nozzle_lph:
                <asp:Label ID="nozzle_lphLabel" runat="server" Text='<%# Eval("nozzle_lph") %>'></asp:Label>
                <br />
                <br />
            </ItemTemplate>
        </asp:DataList>
        <br />
        <asp:DataList ID="DataList2" runat="server" BorderStyle="Double">
            <ItemTemplate>
                lateral_mm:
                <asp:Label ID="lateral_mmLabel" runat="server" Text='<%# Eval("lateral_mm") %>'></asp:Label>
                <br />
                <br />
            </ItemTemplate>
        </asp:DataList>
        <br />
        <asp:DataList ID="DataList3" runat="server" BorderStyle="Double">
            <ItemTemplate>
                main_mm:
                <asp:Label ID="main_mmLabel" runat="server" Text='<%# Eval("main_mm") %>'></asp:Label>
                <br />
                <br />
            </ItemTemplate>
        </asp:DataList>
        <br />
        <asp:DataList ID="DataList4" runat="server" BorderStyle="Double">
            <ItemTemplate>
                submain_mm:
                <asp:Label ID="submain_mmLabel" runat="server" Text='<%# Eval("submain_mm") %>'></asp:Label>
                <br />
                <br />
            </ItemTemplate>
        </asp:DataList>
        <br />
        <asp:DataList ID="DataList5" runat="server" BorderStyle="Double">
            <ItemTemplate>
                Sp_mpump_hp:
                <asp:Label ID="Sp_mpump_hpLabel" runat="server" Text='<%# Eval("Sp_mpump_hp") %>'></asp:Label>
                <br />
                <br />
            </ItemTemplate>
        </asp:DataList>
    </div>
</div>

Namespaces

C#

using System.Data;

VB.Net

Imports System.Data

Code

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!this.IsPostBack)
    {
        DataTable dt1 = new DataTable();
        dt1.Columns.Add("nozzle_lph");
        dt1.Rows.Add(1);
        dt1.Rows.Add(1);
        DataTable dt2 = new DataTable();
        dt2.Columns.Add("lateral_mm");
        dt2.Rows.Add(2);
        dt2.Rows.Add(2);
        DataTable dt3 = new DataTable();
        dt3.Columns.Add("main_mm");
        dt3.Rows.Add(3);
        dt3.Rows.Add(3);
        DataTable dt4 = new DataTable();
        dt4.Columns.Add("submain_mm");
        dt4.Rows.Add(4);
        dt4.Rows.Add(4);
        DataTable dt5 = new DataTable();
        dt5.Columns.Add("Sp_mpump_hp");
        dt5.Rows.Add(5);
        dt5.Rows.Add(5);
        DataList1.DataSource = dt1;
        DataList1.DataBind();
        DataList2.DataSource = dt2;
        DataList2.DataBind();
        DataList3.DataSource = dt3;
        DataList3.DataBind();
        DataList4.DataSource = dt4;
        DataList4.DataBind();
        DataList5.DataSource = dt5;
        DataList5.DataBind();
    }
}

VB.Net

Protected Sub Page_Load(ByVal sender As Object, ByVal e As EventArgs) Handles Me.Load
    If Not Me.IsPostBack Then
        Dim dt1 As DataTable = New DataTable()
        dt1.Columns.Add("nozzle_lph")
        dt1.Rows.Add(1)
        dt1.Rows.Add(1)
        Dim dt2 As DataTable = New DataTable()
        dt2.Columns.Add("lateral_mm")
        dt2.Rows.Add(2)
        dt2.Rows.Add(2)
        Dim dt3 As DataTable = New DataTable()
        dt3.Columns.Add("main_mm")
        dt3.Rows.Add(3)
        dt3.Rows.Add(3)
        Dim dt4 As DataTable = New DataTable()
        dt4.Columns.Add("submain_mm")
        dt4.Rows.Add(4)
        dt4.Rows.Add(4)
        Dim dt5 As DataTable = New DataTable()
        dt5.Columns.Add("Sp_mpump_hp")
        dt5.Rows.Add(5)
        dt5.Rows.Add(5)
        DataList1.DataSource = dt1
        DataList1.DataBind()
        DataList2.DataSource = dt2
        DataList2.DataBind()
        DataList3.DataSource = dt3
        DataList3.DataBind()
        DataList4.DataSource = dt4
        DataList4.DataBind()
        DataList5.DataSource = dt5
        DataList5.DataBind()
    End If
End Sub

Screenshot