Filter Records from dynamically created CheckBoxes and Populate in HTML Table using jQuery Ajax in ASP.Net

Hi aneri,

I have created a sample which full fill your requirement you need to modify it according to your need.

HTML

<div>
    <table border="0" cellpadding="0" cellspacing="0">
        <tr>
            <td>
                Category:-
            </td>
            <td>
                <div id="dynamicCheckBoxes" runat="server">
                </div>
            </td>
            <td>
                <asp:Label ID="lblCount" runat="server" />
            </td>
        </tr>
    </table>
    <br />
    <table id="tblColorImages">
    </table>
</div>
<div>
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
    <script type="text/javascript">
        $(function () {
            var selectedColors = [];

            $('input[name=chkbox]').click(function () {
                $.each($('input[name=chkbox]'), function () {
                    var checked = $(this)[0].checked;
                    if (checked) {
                        selectedColors.push($(this).val());
                    }
                });
                if (!$(this)[0].checked) {
                    //For removing the unchecked checkbox values.
                    removeItem = $(this).val()
                    selectedColors = jQuery.grep(selectedColors, function (value) {
                        return value != removeItem;
                    });
                }
                //values of checked checkboxes.
                var colorId = selectedColors;
                if (colorId != "") {
                    $.ajax({
                        type: "POST",
                        url: "Default.aspx/GetSelectedColorImages",
                        data: '{colorId: "' + colorId + '"}',
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (response) {
                            $('[id*=tblColorImages]').empty();
                            var table = $('[id*=tblColorImages]')
                            var xmlDoc = $.parseXML(response.d);
                            var xml = $(xmlDoc);
                            var ColorImages = xml.find("ColorImages");
                            $('[id*=lblCount]').html("Total Record:-" + ColorImages.length);
                            $('[id*=tblColorImages]').append("<tr><th colspan='2'>Images</th></tr>");
                            //Append Data Row.
                            $.each(ColorImages, function () {
                                var ProductId = $(this).find('ProductId').text();
                                var ColorId = $(this).find('ColorId').text();
                                var ProductName = $(this).find('ProductName').text();
                                var ImgExtension = $(this).find('ImgExtension').text();
                                var row = $("<tr />");
                                row.append("<td>" + ColorId + "</td><td><img src='images/ProductName/" + ProductName + ImgExtension + "'></img></td>");
                                $('[id*=tblColorImages]').append(row);
                            });
                        }
                    });
                }
                else {
                    $('[id*=tblColorImages]').empty();
                    $('[id*=lblCount]').html("");
                }
            });
        });
    </script>
</div>

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        //Bind Your checkboxes according to your database table.
        DataTable dt = new DataTable();
        dt.Columns.Add("ColorId");
        dt.Columns.Add("ColorName");
        dt.Rows.Add(1, "Red");
        dt.Rows.Add(2, "Blue");
        dt.Rows.Add(3, "Black");
        dt.Rows.Add(4, "Green");
        dt.Rows.Add(5, "Yellow");
        string strHtm1 = string.Empty;
        for (int i = 0; i < dt.Rows.Count; i++)
        {
            strHtm1 += "<input type='checkbox' name='chkbox' value='" + dt.Rows[i]["ColorId"].ToString() + "'/>" + dt.Rows[i]["ColorName"].ToString() + "</br>";
        }
        dynamicCheckBoxes.InnerHtml = strHtm1.ToString();
    }
}

[System.Web.Services.WebMethod]
public static string GetSelectedColorImages(string colorId)
{
    string strConnString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    SqlConnection con = new SqlConnection(strConnString);
    string query = "SELECT ProductId,ColorId,ProductName,ImgExtension FROM ColorProduct WHERE ColorId IN (" + colorId + ")";
    SqlCommand cmd = new SqlCommand(query);
    SqlDataAdapter sda = new SqlDataAdapter(cmd);
    cmd.Connection = con;
    DataSet ds = new DataSet();
    DataTable dt = new DataTable("ColorImages");
    sda.Fill(dt);
    ds.Tables.Add(dt);
    return ds.GetXml();
}

VB.Net

Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
    If Not IsPostBack Then
        'Bind Your checkboxes according to your database table.
        Dim dt As New DataTable()
        dt.Columns.Add("ColorId")
        dt.Columns.Add("ColorName")
        dt.Rows.Add(1, "Red")
        dt.Rows.Add(2, "Blue")
        dt.Rows.Add(3, "Black")
        dt.Rows.Add(4, "Green")
        dt.Rows.Add(5, "Yellow")
        Dim strHtm1 As String = String.Empty
        For i As Integer = 0 To dt.Rows.Count - 1
            strHtm1 += "<input type='checkbox' name='chkbox' value='" + dt.Rows(i)("ColorId").ToString() + "'/>" + dt.Rows(i)("ColorName").ToString() + "</br>"
        Next
        dynamicCheckBoxes.InnerHtml = strHtm1.ToString()
    End If
End Sub

<System.Web.Services.WebMethod()> _
Public Shared Function GetSelectedColorImages(colorId As String) As String
    Dim strConnString As String = ConfigurationManager.ConnectionStrings("constr").ConnectionString
    Dim con As New SqlConnection(strConnString)
    Dim query As String = (Convert.ToString("SELECT ProductId,ColorId,ProductName,ImgExtension FROM ColorProduct WHERE ColorId IN (") & colorId) + ")"
    Dim cmd As New SqlCommand(query)
    Dim sda As New SqlDataAdapter(cmd)
    cmd.Connection = con
    Dim ds As New DataSet()
    Dim dt As New DataTable("ColorImages")
    sda.Fill(dt)
    ds.Tables.Add(dt)
    Return ds.GetXml()
End Function

Screenshot