Dynamic CheckBoxes from JSON Array

Question

I am new to JavaScript / JQuery and I am not sure how I could do this. Maybe a small example of each part could help.

Say I have <div id="checkboxes"></div>

When the page loads, I will make an ajax call that will return JSON array. This I know how to do.

The objects will be like so:

[
  {
    name: "Item 1",
    id: "27",
    checked: "true"
  }
  ...
]

I need to somehow take that JSON response and inject in some checkboxes into that div that will also store the ID. The checkbox text would be 'name'.

Then, I need to know how to attach a function for when any of these checkboxes are checked, I will need to get the 'id' at that point because I will do an ajax call when any checked changes.

Any examples of doing this sort of thing with JQuery would be very helpful.

Thanks

Explosion Pills · Accepted Answer · 2013-03-05 17:27:17Z

6

Part 1 (creating the boxes):

$.each(json, function () {
    $("#checkboxes").append($("<label>").text(this.name).prepend(
        $("<input>").attr('type', 'checkbox').val(this.id)
           .prop('checked', this.checked)
    ));
});

Part 2 (dynamic fetching of ID):

$("#checkboxes").on('change', '[type=checkbox]', function () {
   //this is now the checkbox; this.value is the id.
});

http://jsfiddle.net/g2zaR/

answered Mar 5, 2013 at 17:27

Explosion Pills

192k56 gold badges341 silver badges417 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

jmasterx Over a year ago

How do I vertically align the checkbox label?

Explosion Pills Over a year ago

@Milo that is outside the scope of your question, but possibly with vertical-align: top|bottom|middle on the <input>.

Faizan Saiyed Over a year ago

Hey @ExplosionPills, how to build nested checkboxes if it contains child element as another checkbox?

Collectives™ on Stack Overflow

Dynamic CheckBoxes from JSON Array

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related