Javascript - cannot dynamically create checked checkboxes

Question

I have the following function that dynamically creates a bunch of checkboxes:

var drawGroups = function(){
  var groups = document.getElementById("groups"); //groups element is a div
  groups.innerHTML = "";

  //groupList is an array containing strings
  for(var i in groupList){
    var groupName = groupList[i];

    var cb = document.createElement('input');
    cb.type = "checkbox";
    cb.checked = true; //this seems to do nothing
    groups.appendChild(cb);

    groups.innerHTML += groupName + "<br/>"
  }
}

Everything I read indicates cb.checked = true should check the checkbox, but it doesn't seem to do anything. How can I create the checkboxes in a checked state?

scunliffe · Accepted Answer · 2018-08-01 01:42:22Z

3

You need to set the defaultChecked property:

var groupList = ['foo','bar','baz','biz','boz'];

var drawGroups = function(){
  var groups = document.getElementById("groups"); //groups element is a div
  groups.innerHTML = "";

  //groupList is an array containing strings
  for(var i in groupList){
    var groupName = groupList[i];

    var cb = document.createElement('input');
    cb.type = "checkbox";
    cb.defaultChecked = true;
    groups.appendChild(cb);

    groups.innerHTML += groupName + "<br/>"
  }
}
drawGroups();

<div id="groups"></div>

answered Aug 1, 2018 at 1:42

scunliffe

63.8k26 gold badges132 silver badges168 bronze badges

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

Comments

f-CJ · Accepted Answer · 2018-08-01 01:57:24Z

0

You could use the method setAttribute:

cb.setAttribute('checked',  true);

edited Aug 1, 2018 at 1:57

answered Aug 1, 2018 at 1:47

f-CJ

4,5392 gold badges33 silver badges29 bronze badges

Collectives™ on Stack Overflow

Javascript - cannot dynamically create checked checkboxes

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related