How to get value of dynamic CheckBox when selected and filter the table by selected value using jQuery in ASP.Net

Hi aneri,

I have created a sample which full fill your requirement you need to modify 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 />
    <br />
    <table id="tblCatgeory">
    </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 selectedCagtegory = [];
            $('input[name=chkbox]').click(function () {
                $.each($('input[name=chkbox]'), function () {
                    var checked = $(this)[0].checked;
                    if (checked) {
                        selectedCagtegory.push($(this).val());
                    }
                });
                if (!$(this)[0].checked) {
                    //For removing the unchecked checkbox values.
                    removeItem = $(this).val()
                    selectedCagtegory = jQuery.grep(selectedCagtegory, function (value) {
                        return value != removeItem;
                    });
                }
                //values of checked checkboxes.
                var categoryId = selectedCagtegory;
                if (categoryId != "") {
                    $.ajax({
                        type: "POST",
                        url: "Default4.aspx/GetSelectedCategoryImages",
                        data: '{categoryId: "' + categoryId + '"}',
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (response) {
                            $('[id*=tblCatgeory]').empty();
                            var table = $('[id*=tblCatgeory]')
                            var xmlDoc = $.parseXML(response.d);
                            var xml = $(xmlDoc);
                            var CategoryImages = xml.find("CategoryImages");
                            $('[id*=lblCount]').html("Total Record:-" + CategoryImages.length);
                            //Add Header Row.
                            var row = $("<tr />");
                            CategoryImages.eq(0).children().each(function () {
                                var headerCell = $("<th />");
                                headerCell.html(this.nodeName);
                                row.append(headerCell);
                            });
                            $('[id*=tblCatgeory]').append(row);
                            //Append Data Row.
                            $.each(CategoryImages, function () {
                                var Name = $(this).find("Name").text();
                                var url = $(this).find("Url").text();
                                var row = $("<tr />");
                                var img = $("<img />");
                                img[0].src = url;
                                row.append("<td>" + Name + "</td><td>" + $(img)[0].outerHTML + "</td>");
                                $('[id*=tblCatgeory]').append(row);
                            });
                        }
                    });
                }
                else {
                    $('[id*=tblCatgeory]').empty();
                    $('[id*=lblCount]').html("");
                }
            });
        });
    </script>
</div>

C#

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        //Bind Your checkboxes according to this as i am assigning the values to the checkboxes.
        DataTable dt = new DataTable();
        dt.Columns.Add("Category");
        dt.Rows.Add(1);
        dt.Rows.Add(2);
        dt.Rows.Add(3);
        dt.Rows.Add(4);
        string strHtm1 = string.Empty;
        for (int i = 0; i < dt.Rows.Count; i++)
        {
            strHtm1 += "<input type='checkbox' name='chkbox' value='" + dt.Rows[i]["Category"].ToString() + "'/>" + dt.Rows[i]["Category"].ToString() + "</br>";
        }
        dynamicCheckBoxes.InnerHtml = strHtm1;
    }
}

[WebMethod]
public static string GetSelectedCategoryImages(string categoryId)
{
    string strConnString = ConfigurationManager.ConnectionStrings["constr"].ConnectionString;
    SqlConnection con = new SqlConnection(strConnString);
    string query = "SELECT [Name],[Url] FROM [Images] WHERE CategoryId IN (" + categoryId + ")";
    SqlCommand cmd = new SqlCommand(query);
    SqlDataAdapter sda = new SqlDataAdapter(cmd);
    cmd.Connection = con;
    DataSet ds = new DataSet();
    DataTable dt = new DataTable("CategoryImages");
    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 this as i am assigning the values to the checkboxes.
        Dim dt As New DataTable()
        dt.Columns.Add("Category")
        dt.Rows.Add(1)
        dt.Rows.Add(2)
        dt.Rows.Add(3)
        dt.Rows.Add(4)
        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)("Category").ToString() + "'/>" + dt.Rows(i)("Category").ToString() + "</br>"
        Next
        dynamicCheckBoxes.InnerHtml = strHtm1
    End If
End Sub

<WebMethod()> _
Public Shared Function GetSelectedCategoryImages(categoryId 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 [Name],[Url] FROM [Images] WHERE CategoryId IN (") & categoryId) + ")"
    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("CategoryImages")
    sda.Fill(dt)
    ds.Tables.Add(dt)
    Return ds.GetXml()
End Function

ScreenShot