How do I add checkboxes dynamically?

I want to take an JS array of display/id pairs and created checkboxes based on the array.
I want all in one row because the max would be 4 checkboxes
LVL 2
BILL CarlisleAPEX DeveloperAsked:
Who is Participating?
 
DesignbyonyxConnect With a Mentor Commented:
Some sample HTML where the checkboxes should go
<div id="myDiv"></div>

Open in new window


Then in your DOM Ready event in jQuery:
var $myDiv = $('#myDiv');
var jsarray = [
  {id:1, display: 'Option 1'},
  {id:2, display: 'Option 2'},
  {id:3, display: 'Option 3'},
  {id:4, display: 'Option 4'}
];

for(var i = 0; i < jsarray.length; i++) {
  var item = jsarray[i];
  $('<input type="checkbox" id="myCheckbox_' + i + '" value="' + item.id + '" /><label for="myCheckbox_' + i + '">' + item.display + '</label>').appendTo($myDiv);
}

Open in new window


And maybe some styling to give things space:
#myDiv label {
  padding-right: 1em;
}

Open in new window

0
 
BILL CarlisleAPEX DeveloperAuthor Commented:
That is excellent... I am using JSON to return the array from DB so works great!
Thank you! Bill
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.