在 JavaScript 中动态添加复选框

JavaScript 中动态添加复选框可以帮助我们在运行时创建多个可选项，并方便地收集用户的选择。以下是添加复选框的两种方法。

方法一：用 createElement() 创建复选框

可以通过将 createElement() 方法与 input 元素的 type 属性设置为 checkbox，以创建复选框。

//选取目标元素
var target = document.getElementById("target");

//创建复选框
var checkbox = document.createElement('input');
checkbox.type = "checkbox";
checkbox.name = "name";
checkbox.value = "value";
checkbox.id = "id";

//添加到目标元素中
target.appendChild(checkbox);

以上代码将创建一个名称为“name”的复选框，并且值为“value”，并将其添加到目标元素中。

方法二：用 innerHTML 属性创建复选框

我们也可以通过使用 innerHTML 属性来创建复选框，这个方法相对简单。以下是代码示例：

//选取目标元素
var target = document.getElementById("target");

//定义变量
var checkboxHTML = '<input type="checkbox" name="name" value="value" id="id">';

//添加到目标元素中
target.innerHTML = target.innerHTML + checkboxHTML;

以上代码中，我们使用了 innerHTML 属性，并设置了一个包含复选框元素的字符串变量。这一字符串会被添加到目标元素的 innerHTML 中。

结论

以上两种方法都可以用来动态地添加复选框。在具体情况下，可以选择适合自己的方法，以简化代码。