动态添加选中复选框 - Javascript

在 JavaScript 中，我们可以使用 DOM 动态的添加元素到页面上，这样我们就可以动态添加选中复选框了。我们可以使用 createElement 方法创建新的 checkbox 元素，并使用 appendChild 将其添加到页面上。

以下是一个简单的示例，演示如何动态添加选中复选框：

// 创建一个新的 checkbox 元素
var checkbox = document.createElement('input');
checkbox.type = 'checkbox';
checkbox.name = 'myCheckbox';
checkbox.value = 'myCheckboxValue';
checkbox.id = 'myCheckboxId';

// 获取需要添加该元素的父容器
var parentContainer = document.getElementById('parentContainer');

// 将新的 checkbox 元素添加到父容器中
parentContainer.appendChild(checkbox);

// 选中新添加的复选框
checkbox.checked = true;

在上面的示例中，我们使用 createElement 创建了一个新的 checkbox 元素，然后使用 appendChild 将其添加到页面上。最后，我们使用 checked 属性将该元素选中。

如果您想动态添加多个选中复选框，可以使用循环结构来依次添加元素。以下是一个简单的示例：

for (var i = 1; i <= 5; i++) {
  // 创建新的 checkbox 元素
  var checkbox = document.createElement('input');
  checkbox.type = 'checkbox';
  checkbox.value = 'myCheckboxValue' + i;
  checkbox.id = 'myCheckboxId' + i;
  checkbox.name = 'myCheckbox';

  // 获取需要添加该元素的父容器
  var parentContainer = document.getElementById('parentContainer');

  // 将新的 checkbox 元素添加到父容器中
  parentContainer.appendChild(checkbox);

  // 选中新添加的复选框
  checkbox.checked = true;
}

在上面的示例中，我们使用循环结构动态添加了 5 个选中复选框。每个复选框的 value 属性和 id 属性都不同，这样我们就可以在通过表单获取选中值的时候，区分每个复选框的值。

我相信，通过以上两个示例，您已经掌握了如何动态添加选中复选框。Happy coding！