javascript复选框创建元素

Question

我正在尝试将复选框列表添加到表单中。当我使用以下代码时，我得到了数组中的所有项目但没有复选框，所以我不能选择任何东西。我确信有一个非常简单的解决方案，但我看不出我做错了什么（我是新手）。非常感谢您的帮助。代码如下：

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

Answer 1

这里有几个问题：

1) 永远不要使用 document.write - 您需要使用的标准纯 javascript 实现是 appendChild 到父元素。例如：

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

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

2) 使用这些知识，您可以通过简单的修改语句轻松添加元素：

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

Answer 2

看起来您刚刚忘记在其中一行添加.value。相反，它会用字符串覆盖您作为输入框创建的变量。

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

Answer 3

首先创建一个输入类型的元素。然后将它的类型属性设置为复选框。这可以通过下面提到的 2 种方式中的任何一种来完成。

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

也可以使用 setAttribute 函数设置属性。第一个参数说明正在更新的属性。这里 type 属性更新为复选框的类型。

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

Answer 4

这是根据上述建议更新的新代码（谢谢）。我现在得到一排复选框，旁边没有文字。此外，奇怪的是，每个复选框之后也没有中断。就像行“ ptworkinfo.value=(check_value[count] + ''); ”只是没有通过。有什么想法/建议吗？

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