JavaScript 复选框：全面解析其用法和案例71

什么是复选框？

复选框（checkbox）是一种 HTML 输入元素，允许用户在多个选项中选择一个或多个值。它通常显示为一个带有方框或圆圈的复选标记。当用户单击此复选标记时，会切换其选中状态。复选框广泛用于表单、调查和其它需要用户选择多个值的场景中。

用法

创建复选框

要使用 JavaScript 创建复选框，可以使用 createElement() 方法：
```javascript
const checkbox = ("input");
= "checkbox";
```

设置属性

可以使用 setAttribute() 方法设置复选框的属性，例如其 ID、name、value 和是否选中：
```javascript
= "myCheckbox";
= "myCheckboxName";
= "myCheckboxValue";
= true;
```

添加到文档

使用 appendChild() 方法将复选框添加到 DOM：
```javascript
const container = ("container");
(checkbox);
```

事件处理

可以为复选框添加事件处理程序，例如 onchange 事件，以便在复选标记被切换时执行某些操作：
```javascript
("change", () => {
("复选框状态已更改");
});
```

用例

单选组

复选框可以用于创建单选组，其中用户只能选择一个选项。通过将所有复选框的 name 属性设置为相同的值来实现此目的：
```html
Apple
Banana
Orange
```

表单验证

复选框可用于验证表单输入，确保用户选择了所需的值。例如，可以使用正则表达式来验证复选框是否被选中：
```javascript
const checkbox = ("myCheckbox");
if (!/true/()) {
alert("请勾选复选框");
}
```

条件呈现

复选框可用于根据其选中状态有条件地显示或隐藏元素。例如，可以使用 JavaScript 以下代码：
```javascript
const checkbox = ("myCheckbox");
const hiddenElement = ("hiddenElement");
("change", () => {
if () {
= "block";
} else {
= "none";
}
});
```

高级用法

复选框数组

如果需要处理多个复选框，可以使用 querySelectorAll() 方法获取复选框数组，然后对其进行遍历和操作：
```javascript
const checkboxes = ("input[type=checkbox]");
((checkbox) => {
("change", () => {
();
});
});
```