html：动态添加复选框失败？答案

【问题标题】：html: Dynamic add checkbox failure?html：动态添加复选框失败？
【发布时间】：2014-06-09 23:22:45
【问题描述】：

我想做一个可以动态添加复选框的网页。

以下是我的代码。它可以添加标签，但是，它不能添加复选框。不知道是什么原因？

<html>
<head>
    <script text="text/javascript">
        function dynamicAdd(){
            var name = document.getElementById("addName");
            var checkbox= document.createElement(name.value);
            checkbox.type="checkbox";
            checkbox.name=name.value;
            checkbox.value=name.value;
            checkbox.id=name.value;

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

                var container = document.getElementById("checklist");
                container.appendChild(checkbox);
                container.appendChild(label);


            }
    </script>
</head>
<body>
    <form  id="checklist">
        <input type="checkbox"  value="windows">Windows Clean</input><br>
        <input type="checkbox"  value="floor">Floor Clean</input><br>

    </form>
        <input type="text" id="addName" size="25" maxlength="50" value="elevator"><br>
        <Button type="button" onclick="dynamicAdd()" name="add">AddOption</button>
</body>
</html>

【问题讨论】：

标签： html dynamic checkbox checkboxlist

【解决方案1】：

document.createElement(name.value);

是假，根据this (@Quentin)。

从链接中提取的文本

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

【讨论】：