填充复选框 JavaScript

在 Web 页面中，复选框是一种重要的控件，它允许用户在多个选项中进行选择。JavaScript 可以用来填充复选框，从而减少用户的工作量，并提高用户体验。

HTML 复选框

复选框的 HTML 格式如下所示：

<input type="checkbox" name="option" value="option1">Option 1
<input type="checkbox" name="option" value="option2">Option 2
<input type="checkbox" name="option" value="option3">Option 3

其中，type 属性指定为 checkbox，name 属性指定相同的名称，value 属性指定不同的值，以便区别不同的选项。

JavaScript 实现复选框填充

获取元素

首先，需要获取 HTML 中的复选框元素。可以使用以下语句获取具有相同名称的所有复选框元素：

var checkboxes = document.getElementsByName('option');

填充值

使用 checked 属性来设置复选框是否被选中，如下所示：

checkboxes[0].checked = true;

填充所有选项

如果要填充所有复选框选项，可以使用以下代码：

for (var i = 0; i < checkboxes.length; i++) {
  checkboxes[i].checked = true;
}

同时填充多个选项

如果要同时填充多个复选框选项，可以使用以下代码：

var selected = ['option1', 'option2'];
for (var i = 0; i < checkboxes.length; i++) {
  if (selected.indexOf(checkboxes[i].value) !== -1) {
    checkboxes[i].checked = true;
  }
}

其中，selected 数组表示要填充的选项值，使用 indexOf() 方法判断复选框的值是否存在于数组中，如果存在，则设置为选中状态。

总结

使用 JavaScript 可以填充 HTML 页面中的复选框元素，从而方便用户选择，并提高用户体验。需要注意的是，HTML 中多个复选框元素需要指定相同的名称，并通过值来区分。同时，JavaScript 中需要使用 checked 属性来设置复选框是否选中。