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
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="' + + '" /><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

BILL CarlisleAPEX DeveloperAuthor Commented:
That is excellent... I am using JSON to return the array from DB so works great!
Thank you! Bill
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.