HTML 通过JavaScript动态创建复选框

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

阅读更多：HTML 教程

什么是HTML复选框？

HTML复选框是一种用于选择多个选项的表单元素。它允许用户从一组选项中选择多个选择项。复选框通常用于表单提交，以便用户可以选择他们想要的选项。

在HTML中，复选框通过<input type="checkbox">元素表示。

动态创建复选框的方法

使用JavaScript动态创建复选框有多种方法。下面是其中一种常用的方法：

创建一个空的HTML元素，并添加一个包含所有必要属性和事件处理程序的<input>元素。
将创建的复选框元素添加到文档中的适当位置。

让我们来看一个示例，说明如何使用JavaScript动态创建复选框：

<!DOCTYPE html>
<html>
<head>
  <title>动态创建复选框</title>
</head>
<body>

  <h2>动态创建复选框示例</h2>

  <button onclick="createCheckbox()">创建复选框</button>

  <div id="checkboxContainer">
    <!-- 这里将动态创建的复选框添加到此容器中 -->
  </div>

<script>
function createCheckbox() {
  // 创建一个复选框元素
  var checkbox = document.createElement("input");
  checkbox.type = "checkbox";
  checkbox.name = "checkboxName";
  checkbox.value = "checkboxValue";

  // 将复选框添加到checkboxContainer div中
  var container = document.getElementById("checkboxContainer");
  container.appendChild(checkbox);

  // 创建一个相关的标签，并将其添加到checkboxContainer div中
  var label = document.createElement("label");
  label.appendChild(document.createTextNode("复选框标签"));
  container.appendChild(label);
}
</script>

</body>
</html>

在上面的示例中，我们创建了一个按钮，当用户点击该按钮时，createCheckbox()函数将被调用。该函数在DOM中创建一个新的复选框元素，并将其添加到ID为checkboxContainer的div中。

动态创建多个复选框

除了创建单个复选框外，我们还可以使用JavaScript动态创建多个复选框。下面是一个示例，展示如何创建多个复选框：

<!DOCTYPE html>
<html>
<head>
  <title>动态创建多个复选框</title>
</head>
<body>

  <h2>动态创建多个复选框示例</h2>

  <button onclick="createCheckboxes()">创建多个复选框</button>

  <div id="checkboxContainer">
    <!-- 这里将动态创建的复选框添加到此容器中 -->
  </div>

<script>
function createCheckboxes() {
  var numberOfCheckboxes = 5;

  for (var i = 0; i < numberOfCheckboxes; i++) {
    // 创建一个复选框元素
    var checkbox = document.createElement("input");
    checkbox.type = "checkbox";
    checkbox.name = "checkboxName" + i;
    checkbox.value = "checkboxValue" + i;

    // 将复选框添加到checkboxContainer div中
    var container = document.getElementById("checkboxContainer");
    container.appendChild(checkbox);

    // 创建相关的标签，并将其添加到checkboxContainer div中
    var label = document.createElement("label");
    label.appendChild(document.createTextNode("复选框标签" + i));
    container.appendChild(label);
  }
}
</script>

</body>
</html>