Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

javascript checkbox create element

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;
    }
like image 638
reba elliott Avatar asked Oct 23 '12 14:10

reba elliott


People also ask

How to create an input element with type checkbox in HTML?

You can create an <input> element with type="checkbox" by using the document.createElement () method: The Input Checkbox object also supports the standard properties and events.

How to create a checkbox dynamically in JavaScript?

To create a checkbox dynamically, you would need to create the checkbox, its label, and optionally a <br> tag. 1. Using JavaScript In pure JavaScript, you can use the document.createElement () method to programmatically create a checkbox element.

How do I access the input checkbox object?

The Input Checkbox object represents an HTML <input> element with type="checkbox". You can access an <input> element with type="checkbox" by using getElementById ():

How do I set checkbox attributes with jQuery?

With jQuery, you can set checkbox attributes using the .prop () method and .append () method to append the checkbox at the end of a container. This is demonstrated below: Alternatively, here’s a shorter version: To create multiple checkboxes dynamically, you can do something like:


2 Answers

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);
}
like image 105
Tejs Avatar answered Nov 14 '22 23:11

Tejs


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>");
...
like image 36
Shawn Steward Avatar answered Nov 15 '22 01:11

Shawn Steward