如何使用javascript动态创建复选框列表

更新：代码已根据Dan的评论进行更新

我正在做的一个项目有问题。我需要创建一个复选框列表，这取决于在上面的选择下拉列表中选择的内容。我想使用javascript来实现这一点。我可以根据上面的选择创建一个选择下拉列表，但是客户端需要复选框。我想基本上也是这样做的，除了这次做复选框，但我无法让它工作。我通常使用php进行编程，因此不太熟悉javascript。这是代码，我必须做出选择下拉。。。。什么是最好的方法，让它成为一个复选框列表？请注意，此代码已大大减少，以保持易于阅读（此处仅列出重要的部分）

代码：

函数填充（slct1、slct2）{
var s1=document.getElementById（slct1）；
var s2=document.getElementById（slct2）；
s2.innerHTML=“”；
如果（s1.1值==“Cat1”）{
var optionArray=[“Subcat1”、“Subcat1.1”、“Subcat1.2”]；
}否则如果（s1.value==“Cat2”）{
var optionArray=[“Subcat2”、“Subcat2.1”、“Subcat2.2”]；
}否则如果（s1.value==“Cat3”）{
var optionArray=[“Subcat3”、“Subcat3.1”、“Subcat3.3”]；
}
for（optionArray中的var选项）{
if（optionArray.hasOwnProperty（option））{
var对=optionArray[选项]；
var newOption=document.createElement（“选项”）；
newOption.value=pair；
newOption.innerHTML=pair；
s2.选项。添加（新选项）；
}
}
}
动态选择下拉列表

选择一个类别：
第一类
第二类
第三类

选择子类别：

---

任何帮助都将不胜感激，如果您在任何开发方面需要帮助，我将尽力报答您的帮助。

复选框是带有

type='checkbox'

的简单输入元素。因此，您必须至少准备两件事：一个用于描述框的文本节点和框本身。在这种情况下，最好使用

元素来包含前面提到的两个内容：

// create the necessary elements
var label= document.createElement("label");
var description = document.createTextNode(pair);
var checkbox = document.createElement("input");

checkbox.type = "checkbox";    // make the element a checkbox
checkbox.name = "slct[]";      // give it a name we can check on the server side
checkbox.value = pair;         // make its value "pair"

label.appendChild(checkbox);   // add the box to the element
label.appendChild(description);// add the description to the element

// add the label element to your div
document.getElementById('some_div').appendChild(label);

您必须为每一双鞋执行上述步骤。请注意，必须先清除给定的

，然后才能填充它：

// clear the former content of a given <div id="some_div"></div>
document.getElementById('some_div').innerHTML = '';

//清除给定文件的前一个内容
document.getElementById（'some_div'）。innerHTML=''；

动态创建复选框的过程确实比创建选择选项要复杂一些。您需要创建：

• 复选框
• 它的标签
• 可能还有一个
  的样式

以下是代码的要点，全文如下：

---

请注意，

for（optionArray中的var选项）

还将包括您不想要的

optionArray的本机属性。看见谢谢你，丹。我更新了代码以反映您的输入。你知道我该怎么做才能解决我的主要问题吗？我刚刚发布了一个完整的工作示例：）我会投票支持这个，但我没有15%的声誉。但我确实把它标记为答案。谢谢你的帮助。它工作得很好。我也试过类似的方法，但没能成功。我猜我的语法一开始是错的。不管怎样，你都得工作，谢谢你。“现在我可以睡觉了，几个小时后就可以结束了”。@立体科学：不客气。还有一句话：不要对数组使用
循环（对象中的x）
循环。对于（i=0；i

，使用

。另请参见。我会记住这一点并试一试。这里的“pair”是一个用户定义的变量。将文本传递给复选框。感谢您的输入。我已经看到了泽塔的答案，它是有效的。但我确实添加了你建议的线条br，使它看起来更漂亮。
// clear the former content of a given <div id="some_div"></div>
document.getElementById('some_div').innerHTML = '';

for (var option in optionArray) {
    if (optionArray.hasOwnProperty(option)) {
        var pair = optionArray[option];
        var checkbox = document.createElement("input");
        checkbox.type = "checkbox";
        checkbox.name = pair;
        checkbox.value = pair;
        s2.appendChild(checkbox);

        var label = document.createElement('label')
        label.htmlFor = pair;
        label.appendChild(document.createTextNode(pair));

        s2.appendChild(label);
        s2.appendChild(document.createElement("br"));    
    }
}