HTML 使用JavaScript动态创建复选框

在本文中，我们将介绍如何使用JavaScript动态创建HTML复选框。

阅读更多：HTML 教程

什么是复选框？

复选框是一种可以选择或取消选择的HTML元素。它可以用于让用户在多个选项中进行多选，也可以用于表示二进制状态（选中或未选中）。

使用HTML创建复选框

在HTML中，我们可以使用<input>标签创建复选框。设置type属性为checkbox可以使其成为复选框。例如：

<input type="checkbox" name="option1" value="value1"> Option 1

上面的示例创建了一个复选框，名称为option1，值为value1，并显示为“Option 1”。

使用JavaScript动态创建复选框

有时候，我们需要通过JavaScript动态创建复选框，而不是使用静态的HTML代码。下面是一个使用JavaScript创建复选框的示例：

// 创建复选框元素
var checkbox = document.createElement("input");
checkbox.type = "checkbox";
checkbox.name = "dynamicOption";
checkbox.value = "dynamicValue";

// 创建标签
var label = document.createElement("label");
label.appendChild(document.createTextNode("Dynamic Option"));

// 将复选框和标签添加到页面中
var container = document.getElementById("container");
container.appendChild(checkbox);
container.appendChild(label);

上面的示例中，我们首先使用document.createElement方法创建了一个input元素，并设置其属性为复选框所需的值。然后，我们创建了一个label元素，并使用appendChild方法将文本节点添加到label中。最后，我们通过getElementById方法获取到页面中的容器元素，将复选框和标签添加到容器中。

动态创建多个复选框

如果我们需要一次性创建多个复选框，可以使用循环结构来实现。下面是一个使用JavaScript动态创建多个复选框的示例：

var options = ["Option 1", "Option 2", "Option 3"];
var container = document.getElementById("container");

for (var i = 0; i < options.length; i++) {
  // 创建复选框元素
  var checkbox = document.createElement("input");
  checkbox.type = "checkbox";
  checkbox.name = "dynamicOption";
  checkbox.value = "dynamicValue" + i;

  // 创建标签
  var label = document.createElement("label");
  label.appendChild(document.createTextNode(options[i]));

  // 将复选框和标签添加到页面中
  container.appendChild(checkbox);
  container.appendChild(label);
  container.appendChild(document.createElement("br"));
}

上面的示例中，我们使用了一个字符串数组options来存储复选框的选项。然后，我们使用循环结构遍历数组，创建多个复选框并添加到页面中。每次添加一个复选框之后，我们还增加了一个<br>标签，以使复选框在页面中换行显示。