Creating the checkbox dynamically using JavaScript?

Question

I am trying to create a checkbox dynamically using following HTML/JavaScript. Any ideas why it doesn't work?

<div id="cb"></div>
<script type="text/javascript">
    var cbh = document.getElementById('cb');
    var val = '1';
    var cap = 'Jan';

    var cb = document.createElement('input');
    cb.type = 'checkbox';
    cbh.appendChild(cb);
    cb.name = val;
    cb.value = cap;
    cb.appendChild(document.createTextNode(cap));
</script>

primetwig · Accepted Answer · 2013-08-08 08:05:33Z

127

You're trying to put a text node inside an input element.

Input elements are empty and can't have children.

...
var checkbox = document.createElement('input');
checkbox.type = "checkbox";
checkbox.name = "name";
checkbox.value = "value";
checkbox.id = "id";

var label = document.createElement('label')
label.htmlFor = "id";
label.appendChild(document.createTextNode('text for label after checkbox'));

container.appendChild(checkbox);
container.appendChild(label);

edited Aug 8, 2013 at 8:05

primetwig

4653 silver badges12 bronze badges

answered May 14, 2009 at 22:44

Quentin

948k136 gold badges1.3k silver badges1.4k bronze badges

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

2 Comments

Daniel Szabo Over a year ago

Note that in some flavors of IE, the checkbox.checked value won't stick unless you set it AFTER the control's been appended to the page.

Nic Scozzaro Over a year ago

I want the checkbox inside the label, but doing label.appendChild(checkbox) doesn't work for me -- it puts the checkbox outside the label. How would you do this?

David Snabel-Caunt · Accepted Answer · 2009-05-14 22:45:54Z

2

The last line should read

cbh.appendChild(document.createTextNode(cap));

Appending the text (label?) to the same container as the checkbox, not the checkbox itself

answered May 14, 2009 at 22:45

David Snabel-Caunt

58.4k13 gold badges118 silver badges132 bronze badges

Comments

Youssef · Accepted Answer · 2011-09-27 09:37:00Z

0

You can create a function:

function changeInputType(oldObj, oTyp, nValue) {
  var newObject = document.createElement('input');
  newObject.type = oTyp;
  if(oldObj.size) newObject.size = oldObj.size;
  if(oldObj.value) newObject.value = nValue;
  if(oldObj.name) newObject.name = oldObj.name;
  if(oldObj.id) newObject.id = oldObj.id;
  if(oldObj.className) newObject.className = oldObj.className;
  oldObj.parentNode.replaceChild(newObject,oldObj);
  return newObject;
}

And you do a call like:

changeInputType(document.getElementById('DATE_RANGE_VALUE'), 'checkbox', 7);

answered Sep 27, 2011 at 9:37

Youssef

3,1541 gold badge28 silver badges20 bronze badges

Comments

user9991632 · Accepted Answer · 2019-04-12 19:48:22Z

0

   /* worked for me  */
     <div id="divid"> </div>
     <script type="text/javascript">
         var hold = document.getElementById("divid");
         var checkbox = document.createElement('input');
         checkbox.type = "checkbox";
         checkbox.name = "chkbox1";
         checkbox.id = "cbid";
         var label = document.createElement('label');
         var tn = document.createTextNode("Not A RoBot");
         label.htmlFor="cbid";
         label.appendChild(tn); 
         hold.appendChild(label);
         hold.appendChild(checkbox);
      </script>

answered Apr 12, 2019 at 19:48

user9991632

1

2 Comments

user9991632 Over a year ago

the "value" attribute in a checkbox is kinda vague. the link give a little info: developer.mozilla.org/en-US/docs/Web/HTML/Element/Input/…

Akin Okegbile Over a year ago

This is a code only answer, Can you explain the code? How does it differ from existing answers?

Collectives™ on Stack Overflow

Creating the checkbox dynamically using JavaScript?

4 Answers 4

2 Comments

Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related