javascript checkbox create element

Question

I am trying to add a checkbox list to a form. When I use the following code, I get all the items in the array but no checkboxes, so I cannot select anything. I'm sure there is a very simple solution to this, but I can't see what I'm doing wrong (I'm new at this). Many thanks in advance for your help. Here is the code:

var check_value = new Array()
check_value[0] = "I work at home"
check_value[1] = "Train/Subway"
check_value[2] = "Walk"
check_value[3] = "Bicycle"

for(count in check_value)
    {
    var ptworkinfo=document.createElement("input");
    ptworkinfo.type="checkbox";
    ptworkinfo=(check_value[count] + "</br>");
    ptworkinfo.id="ptworkinfo";
    document.write(ptworkinfo);
    count+=count;
    }

the second "ptworkinfo=" overwrites the first.

Diodeus - James MacFarlane
– Diodeus - James MacFarlane

2012-10-23 14:46:34 +00:00
Commented Oct 23, 2012 at 14:46 — Diodeus - James MacFarlane
– Diodeus - James MacFarlane, Commented Oct 23, 2012 at 14:46

Tejs · Accepted Answer · 2012-10-23 14:49:32Z

14

There are a couple of problems here:

1) Never use document.write - The standard, pure javascript implementation you need to be using is to appendChild to a parent element. For example:

var parentElement = document.getElementById('myParentElement');

if(parentElement != null)
   parentElement.appendChild(myChildElement);

2) Using this knowledge, you can easily add elements with a simple rework of your statements:

var parentElement = document.getElementById('myParentElement');

for(var count in check_value)
{
    var newCheckBox = document.createElement('input');
    newCheckBox.type = 'checkbox';
    newCheckBox.id = 'ptworkinfo' + count; // need unique Ids!
    newCheckBox.value = check_value[count] + '<br/>';

    parentElement.appendChild(newCheckBox);
}

answered Oct 23, 2012 at 14:49

Tejs

41.4k10 gold badges71 silver badges89 bronze badges

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

3 Comments

reba elliott Over a year ago

Thanks, @Tejs. I was using appendChild originally, but I kept getting this message: "NOT_FOUND_ERR: DOM Exception 8: An attempt was made to reference a Node in a context where it does not exist." So I swtiched to document.write just so I could see what was happening with the checkboxes. I'll try out your suggestion right now. Thanks again.

Tejs Over a year ago

I notice you had a rejected edit to this post; while it's been rejected, the reason there is no text to the checkbox is that you have only added checkbox elements; checkboxes do not have text associated with them unless you add a <span>, <div> or other container with text inside it next to the checkbox in some fashion.

reba elliott Over a year ago

Thank you so much, @Tejs! I don't know why the edit was rejected--it just contained the updated code. I'm trying that now.

Shawn Steward · Accepted Answer · 2012-10-23 14:48:51Z

2

Looks like you just forgot to put .value on one of your lines. Instead, it is overwriting the variable you created as an input box with a string.

...
    ptworkinfo.value =(check_value[count] + "</br>");
...

answered Oct 23, 2012 at 14:48

Shawn Steward

6,8353 gold badges29 silver badges46 bronze badges

2 Comments

reba elliott Over a year ago

I have inserted the .value and removed count+=count, and taken out document.write and inserted appendChild. Now I am getting a row of four checkboxes with no text next to them. Code follows.

Shawn Steward Over a year ago

You need to add the text separately. Check this post: stackoverflow.com/questions/866239/…

Teja Goud Kandula · Accepted Answer · 2020-11-16 10:05:44Z

1

First create an element of type input. Then set it is type property to checkbox. This can be done in any of the 2 ways mentioned below.

const checkBox = document.createElement('input')
checkBox.type = 'checkbox'

Properties can be set using setAttribute function also. The first argument states what property is being updated. Here type property is updated to the type of checkbox.

checkBox.setAttribute('type','checkbox')

edited Nov 16, 2020 at 10:05

answered Nov 16, 2020 at 9:59

Teja Goud Kandula

1,5841 gold badge18 silver badges35 bronze badges

Comments

reba elliott · Accepted Answer · 2012-10-23 15:45:45Z

0

Here is the new code, updated from suggestions above (thank you). I am now getting a row of checkboxes with no text next to them. Also, weirdly, there is not a break after each checkbox, either. It's like the line " ptworkinfo.value=(check_value[count] + '< br/>'); " just isn't getting through. Any thoughts/suggestions?

var residence = document.getElementById('residence');

var check_value = new Array( )
check_value[0] = "I work at home"
check_value[1] = "Train/Subway"
check_value[2] = "Walk"
check_value[3] = "Bicycle"

for(var count in check_value)
    {
    var ptworkinfo=document.createElement("input");   
    ptworkinfo.value=(check_value[count] + '</br>');
    ptworkinfo.type="checkbox";
    ptworkinfo.id="ptworkinfo" + count;
    residence.appendChild(ptworkinfo);
    }

answered Oct 23, 2012 at 15:45

reba elliott

791 gold badge3 silver badges7 bronze badges

2 Comments

reba elliott Over a year ago

Thanks, @ShawnSteward. I tried to edit the post with the new code, but the edit was rejected (I don't know why). And thanks for the link to the previous question--I am getting text with each checkbox at last, but only the word "label." I've tried to assign label.value to the array elements, but that's not working. Any other ideas? Thank you so much.

Shawn Steward Over a year ago

Go ahead and post your updated code that you're using to add the labels.

Collectives™ on Stack Overflow

javascript checkbox create element

4 Answers 4

3 Comments

2 Comments

Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

3 Comments

2 Comments

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related