create checkboxes dynamically in JavaScript

Question

I'm trying to create check boxes dynamically. But I have no idea what is the wrong with this code. Somebody please help. Comment if you need more details.

$.getJSON(url, function(json) {
  console.log(json);
  console.log(json.items.length);

  for (var i = 0; i < json.items.length; i++) {

    console.log(json.items[i].name);

    var checkbox = document.createElement('input');
    checkbox.type = "checkbox";
    checkbox.name = "name" + json.items[i].name;
    checkbox.value = "value";
    checkbox.id = "id" + i;
  }
});

Thank you

"No idea what's wrong with the code" - what have you tried / how exactly is it failing? — wrschneider
– wrschneider, Commented Apr 17, 2016 at 11:19
Hmm... is there any error that you are facing? Or it's just that the checkboxes are not appearing? You probably will need to append the checkboxes created to existing elements on the page such as the body? or some div? Perhaps you can provide more information about what problem are you actually facing? — kennho
– kennho, Commented Apr 17, 2016 at 11:19
Also suggest doing more research before asking a new question - google for "create checkboxes dynamically in Javascript" turns up several examples on SO that you could have looked at for ideas first — wrschneider
– wrschneider, Commented Apr 17, 2016 at 11:21
Before I add checkbox part, I could print console.log(json.items[i].name);. But after adding checkbox, that log also did not appear. — Choxmi
– Choxmi, Commented Apr 17, 2016 at 11:23

Darin Dimitrov · Accepted Answer · 2016-04-17 11:18:12Z

You never seem to be appending those dynamically created checkboxes to your DOM, so this checkbox variable that you create inside the loop simply gets garbage collected. If you want those checkboxes to appear somewhere make sure that you are actually adding them to the DOM:

document.body.appendChild(checkbox);

Of course instead of simply appending them to the body of the DOM you might want to append them to some specific element in which case you might need to get this element first:

var someDiv = document.getElementById('someId');
someDiv.appendChild(checkbox);

or if you are using jQuery:

for (var i = 0; i < json.items.length; i++) {
    $('<input />', {
        type : 'checkbox',
        id: 'id' + i,
        name: 'name' + json.items[i].name,
        value: 'value'
    })
    .appendTo("#someId"); 
}

where you obviously have the corresponding container to harbor those newly added elements:

<div id="someId"></div>

MakDo · Accepted Answer · 2016-04-17 11:23:56Z

Just what Darin said,

you need to append a dynamically created element to the DOM. So in your case

        $.getJSON(url, function(json) {
        console.log(json); 
        console.log(json.items.length);

        for(var i=0;i<json.items.length;i++){

        console.log(json.items[i].name);

        var checkbox = document.createElement('input');
        checkbox.type = "checkbox";
        checkbox.name = "name"+json.items[i].name;
        checkbox.value = "value";
        checkbox.id = "id"+i;   
        document.body.appendChild(checkbox);
        }
    });

OR You can create a div in your HTML sheet, and append your checkboxes to that, so it would be something like ..

   var div = document.getElementById('div');
   for(var i=0;i<json.items.length;i++){

    console.log(json.items[i].name);

    var checkbox = document.createElement('input');
    checkbox.type = "checkbox";
    checkbox.name = "name"+json.items[i].name;
    checkbox.value = "value";
    checkbox.id = "id"+i;   
    div.appendChild(checkbox);
    }
});

Ataur Rahman Munna · Accepted Answer · 2016-04-17 11:30:15Z

1

you need to add the checkbox in some html container. say you have a div with id append like below,

<div id="append" name="append">Append here</div>

and your dynamically created checkbox added to that div.

js:

$.getJSON(url, function(json) {
      console.log(json);
      console.log(json.items.length);

      for (var i = 0; i < json.items.length; i++) {

            var checkbox = document.createElement('input');
            checkbox.type = "checkbox";
            checkbox.name = "name" + json.items[i].name;
            checkbox.value = "value";
            checkbox.id = "id" + i;
            document.getElementById( 'append' ).appendChild( checkbox);

      }
});

answered Apr 17, 2016 at 11:30

Ataur Rahman Munna

3,9151 gold badge25 silver badges35 bronze badges

Collectives™ on Stack Overflow

create checkboxes dynamically in JavaScript

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related