Search code examples
javascriptcheckboxcreateelement

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;
    }

Solution

  • 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);
    }