How To Get Value Of Dynamically Created Checkbox In Jquery

Remove From My Forums

How to get values from a dynamically created Check Box list ?

Question
User-1410783915 posted

I found a very good article on how to populate a CheckBox list using JQuery and Ajax. I was able to follow this example and have it working. I have no idea on how to get the values for the check boxes selected, since in the example the check box list is created dynamically. Can someone please tell me how I can get the values for the check boxes selected using JQuery or Java script, or even C# for that matter?

https://codewala.net/2013/08/26/bind-a-checkbox-list-from-database-using-jquery-ajax/

Answers

User-1509636757 posted

You can use jQuery CSS Selector to fetch all checked CheckBoxes. For that, add a CSS Class while creating dynamic CheckBoxes:

                      function CreateCheckBoxList(checkboxlistItems) {             var table = $('<table></table>');             var counter = 0;             $(checkboxlistItems).each(function () {                 table.append($('<tr></tr>').append($('<td></td>').append($('<input>').attr({                     type: 'checkbox', name: 'chklistitem', value: this.Value, id: 'chklistitem' + counter,                                              'class': 'chkListItem'                                            })).append(                 $('<label>').attr({                     for: 'chklistitem' + counter++                 }).text(this.Name))));             });              $('#dvCheckBoxListControl').append(table);         }

And then you can fetch all checked CheckBoxes with below jQuery:

                      function GetSelectedCheckBoxes() {             var allVals = [];             $('.chkListItem :checked').each(function () {                 allVals.push($(this).val());             });             alert(allVals);         }

hope that helps./.

Marked as answer by Thursday, October 7, 2021 12:00 AM

User1397563414 posted

Hi Gleeming,

I agree with KaushaL,

I have another solution to solve this problem.
Use JQuery to find all the checkbox, then find out the checkbox which has been checked.
You can get help from the following code,

1. Add a button, after click it, "Getselected" method will be called.

                      <input type="button" value="GetSelected" onclick="GetSelected()" class="btn btn-primary" />

2. JS method

                      function GetSelected() {             var chected = new Array();             $("[name='chklistitem']").each(function (index, data) {                 if (data.checked) {                     chected.push(data.value +"---"+data.nextSibling.textContent);                 }             });             alert(chected);         }

"data.nextSibling" will get the related label.

The following image shows the result,

Hope this will help.

Regards,
JiyaoLee

Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM

User-1509636757 posted

Hi Kasuha, it did not work with your code. Perhaps you can give it a try.

There is a space which is causing issue:

                      $                      (                      '.chkListItem                                                      :                        checked'                      )

it should be:

                      $                      (                      '.chkListItem:checked'                      )

Here is a working sample:

<!DOCTYPE html>  <html xmlns="http://www.w3.org/1999/xhtml"> <head runat="server">     <title></title>     <script src="Scripts/jquery-1.12.4.min.js"></script>     <script type="text/javascript" language="javascript">         function PopulateCheckBoxList() {             $.ajax({                 type: "POST",                 url: "WebForm50.aspx/GetCheckBoxDetails",                 contentType: "application/json; charset=utf-8",                 data: "{}",                 dataType: "json",                 success: AjaxSucceeded,                 error: AjaxFailed             });         }         function AjaxSucceeded(result) {             BindCheckBoxList(result);         }         function AjaxFailed(result) {             alert('Failed to load checkbox list');         }         function BindCheckBoxList(result) {              var items = JSON.parse(result.d);             CreateCheckBoxList(items);         }         function CreateCheckBoxList(checkboxlistItems) {             var table = $('<table></table>');             var counter = 0;             $(checkboxlistItems).each(function () {                 table.append($('<tr></tr>').append($('<td></td>').append($('<input>').attr({                     type: 'checkbox', name: 'chklistitem', value: this.Value, id: 'chklistitem' + counter, 'class': 'chkListItem'                 })).append(                 $('<label>').attr({                     for: 'chklistitem' + counter++                 }).text(this.Name))));             });              $('#dvCheckBoxListControl').append(table);         }          function GetSelection() {             var allVals = [];             $('.chkListItem:checked').each(function () {                 debugger;                 allVals.push($(this).val());             });             $("#result").text("Selected Values: " + allVals);         }     </script> </head> <body>     <form id="form1" runat="server">         <div>             <input type="button" onclick="PopulateCheckBoxList()" value="Load" />             <input type="button" onclick="GetSelection()" value="Get Selected" />             <div id="dvCheckBoxListControl"></div>             <div id="result"></div>         </div>     </form> </body> </html>

                      public partial class WebForm50 : System.Web.UI.Page     {         protected void Page_Load(object sender, EventArgs e)         {          }          [WebMethod()]         public static string GetCheckBoxDetails()         {             List<CheckBoxItem> chkListAppointments = GetControlDetailsDB();             JavaScriptSerializer ser = new JavaScriptSerializer();             return ser.Serialize(chkListAppointments);         }          //-- Get some sample data         private static List<CheckBoxItem> GetControlDetailsDB()         {             return new List<CheckBoxItem>() {                 new CheckBoxItem() { Name = "Check 1", Value = "1" },                 new CheckBoxItem() { Name = "Check 2", Value = "2" },                 new CheckBoxItem() { Name = "Check 3", Value = "3" },                 new CheckBoxItem() { Name = "Check 4", Value = "4" }             };         }          public class CheckBoxItem         {             public string Name { get; set; }             public string Value { get; set; }         }     }

Output:

Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM

How To Get Value Of Dynamically Created Checkbox In Jquery

Source: https://social.msdn.microsoft.com/Forums/en-US/9b5c8bbe-3540-4458-8c57-9ab31dcba721/how-to-get-values-from-a-dynamically-created-check-box-list-?forum=aspdotnetjquery

Posted by: gomeshattond.blogspot.com