Here I have created sample that will help you out.
I have made it by referring below article
HTML
<div>
<asp:CheckBoxList ID="chkItems" runat="server" RepeatColumns="1">
<asp:ListItem Text="" Value=""></asp:ListItem>
</asp:CheckBoxList>
<asp:Button Text="Submit" runat="server" OnClick="Submit" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
$(function () {
$.ajax({
type: "POST",
url: "CS.aspx/GetItems",
data: '{}',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: OnSuccess,
failure: function (response) {
alert(response.d);
},
error: function (response) {
alert(response.d);
}
});
});
function OnSuccess(r) {
var xmlDoc = $.parseXML(r.d);
var xml = $(xmlDoc);
var Items = xml.find("Items");
var repeatColumns = parseInt("<%=chkItems.RepeatColumns%>");
if (repeatColumns == 0) {
repeatColumns = 1;
}
var cell = $("[id*=chkItems] td").eq(0).clone(true);
$("[id*=chkItems] tr").remove();
$.each(Items, function (i) {
var item = $(this);
var row;
if (i % repeatColumns == 0) {
row = $("<tr />");
$("[id*=chkItems] tbody").append(row);
} else {
row = $("[id*=chkItems] tr:last-child");
}
var checkbox = $("input[type=checkbox]", cell);
checkbox[0].id = checkbox[0].id.replace("0", i);
checkbox[0].name = "FruitId";
checkbox.val(item.find("ItemId").text());
var label = cell.find("label");
if (label.length == 0) {
label = $("<label />");
}
label.attr("for", checkbox[0].id);
var labelText = item.find("ItemName").text() + ' ' + '(' + item.find("Count").text() + ')';
label.html(labelText);
cell.append(label);
row.append(cell);
cell = $("[id*=chkItems] td").eq(0).clone(true);
});
$("[id*=chkItems] input[type=checkbox]").click(function () {
var cell = $(this).parent();
var hidden = cell.find("input[type=hidden]");
var label = cell.find("label");
if ($(this).is(":checked")) {
if (hidden.length == 0) {
hidden = $("<input type = 'hidden' />");
cell.append(hidden);
}
hidden[0].name = "FruitName";
hidden.val(label.text().split('(')[0]);
cell.append(hidden);
} else {
cell.remove(hidden);
}
});
};
</script>
</div>
C#
[WebMethod]
public static string GetItems()
{
DataTable dtItems = new DataTable("Items");
dtItems.Columns.Add("ItemId", typeof(int));
dtItems.Columns.Add("ItemName", typeof(string));
dtItems.Columns.Add("Count", typeof(int));
dtItems.Rows.Add(121, "Shirts", 50);
dtItems.Rows.Add(131, "Tshirts", 70);
DataSet ds = new DataSet();
ds.Tables.Add(dtItems);
return ds.GetXml();
}
protected void Submit(object sender, EventArgs e)
{
string fruitIds = Request.Form["FruitId"];
string fruitNames = Request.Form["FruitName"];
ClientScript.RegisterStartupScript(this.GetType(), "alert", "alert('Id: " + fruitIds + "\\nText: " + fruitNames + "');", true);
}
VB
<WebMethod> _
Public Shared Function GetItems() As String
Dim dtItems As New DataTable("Items")
dtItems.Columns.Add("ItemId", GetType(Integer))
dtItems.Columns.Add("ItemName", GetType(String))
dtItems.Columns.Add("Count", GetType(Integer))
dtItems.Rows.Add(121, "Shirts", 50)
dtItems.Rows.Add(131, "Tshirts", 70)
Dim ds As New DataSet()
ds.Tables.Add(dtItems)
Return ds.GetXml()
End Function
Protected Sub Submit(sender As Object, e As EventArgs)
Dim fruitIds As String = Request.Form("FruitId")
Dim fruitNames As String = Request.Form("FruitName")
ClientScript.RegisterStartupScript(Me.[GetType](), "alert", (Convert.ToString((Convert.ToString("alert('Id: ") & fruitIds) + "\nText: ") & fruitNames) + "');", True)
End Sub
Screenshot
