下面为你提供一份 HTML5 中 Checkbox（复选框）最全面、最系统的解析，涵盖所有常用属性、事件、样式、分组、多选框逻辑、全选/取消全选、禁用状态、美化技巧、可运行示例，以及开发中最常见的坑。读完可直接用于实战开发（移动端 + PC端）。
🟩 一、Checkbox 是什么？
在 HTML5 中，复选框使用：
<input type="checkbox">
用于选择 多个 可选项，允许勾选 0～N 个。
🧩 二、基本语法
<input type="checkbox" id="agree">
<label for="agree">我已阅读并同意协议</label>
- 通过
for绑定label点击文本也可选中 - 所有
<input type="checkbox">默认是独立的
⚙️ 三、Checkbox 常用属性详解
| 属性 | 说明 | 示例 |
|---|---|---|
checked | 默认选中 | <input type="checkbox" checked> |
disabled | 禁用（不可操作） | <input disabled> |
required | 表单提交必须至少选一个 | <input required> |
name | 提交字段名 | <input name="hobby"> |
value | 提交值 | <input value="run"> |
form | 指定属于哪个 <form> | <input form="form1"> |
✔ 复选框 必须有 name 和 value 才能在表单提交中找到勾选内容。
🟨 四、Checkbox 的事件（JS）
| 事件 | 说明 |
|---|---|
change | 勾选状态变化触发（最常用） |
click | 点击触发（作用小于 change） |
input | 部分浏览器兼容 |
示例：
document.getElementById("agree").addEventListener("change", function () {
console.log(this.checked);
});
🔢 五、Checkbox 分组与多选
多个 checkbox 的 name 一样，就属于一个组：
<input type="checkbox" name="hobby" value="read"> 阅读
<input type="checkbox" name="hobby" value="run"> 跑步
<input type="checkbox" name="hobby" value="music"> 音乐
提交后台得到：
"hobby": ["read", "run"]
🟦 六、实现“全选 / 全不选 / 反选”
这是 checkbox 最常见功能。
✔ 代码示例
<input type="checkbox" id="checkAll"> 全选
<hr>
<input type="checkbox" class="item"> A
<input type="checkbox" class="item"> B
<input type="checkbox" class="item"> C
<script>
const all = document.getElementById("checkAll");
const items = document.querySelectorAll(".item");
all.addEventListener("change", () => {
items.forEach(i => i.checked = all.checked);
});
items.forEach(i => {
i.addEventListener("change", () => {
all.checked = [...items].every(i => i.checked);
});
});
</script>
🎨 七、Checkbox 的 CSS 美化技巧
原生 checkbox 很难直接美化，因此通常使用“隐藏 input + 自定义样式”。
✔ 自定义美化实现方法
<label class="cb">
<input type="checkbox">
<span class="box"></span> 自定义样式
</label>
<style>
.cb input {
display: none;
}
.cb .box {
width: 18px;
height: 18px;
border: 2px solid #666;
display: inline-block;
border-radius: 4px;
margin-right: 5px;
vertical-align: middle;
}
.cb input:checked + .box {
background: #4CAF50;
border-color: #4CAF50;
}
</style>
效果：绿勾风格的复选框。
📱 八、移动端 Checkbox 注意点
| 问题 | 解决方式 |
|---|---|
| 多指触摸 “点不到” | click 替换成 touchstart |
| 选中区域太小 | 使用 label 扩大点击范围 |
| 样式变形 | 使用 自定义样式（隐藏原生） |
🧪 九、Checkbox 表单验证
HTML5 原生验证：
<input type="checkbox" required>
若不勾选，submit 会自动阻止。
🔍 十、Checkbox 与 JavaScript 获取值
1. 获取是否选中：
checkbox.checked
2. 获取所有选中的值：
const values = [...document.querySelectorAll("input[name=hobby]:checked")]
.map(i => i.value);
console.log(values);
⚠️ 十一、Checkbox 常见坑及解决
| 问题 | 原因 | 解决 |
|---|---|---|
| 点击 label 没反应 | for 与 id 不一致 | 保证相同 |
| 默认勾选无效 | HTML 中写错为 checked="false" | 改成 checked |
| 自定义样式失效 | 忘记隐藏 input | 用 display:none |
| 表单提交缺少字段 | 忘写 value 或 name | 必须写 |
⭐ 十二、完整可运行示例（含全选、美化、事件）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style>
/* 自定义美化 */
.cb { display: flex; align-items: center; margin: 6px 0; }
.cb input { display:none; }
.cb .box {
width: 18px;
height: 18px;
border: 2px solid #777;
border-radius: 4px;
display: inline-block;
margin-right: 6px;
transition: .2s;
}
.cb input:checked + .box {
background: #2196F3;
border-color: #2196F3;
}
</style>
</head>
<body>
<h3>Checkbox 完整示例</h3>
<label class="cb">
<input type="checkbox" id="all">
<span class="box"></span> 全选
</label>
<hr>
<label class="cb">
<input type="checkbox" class="item" value="A">
<span class="box"></span> 选项 A
</label>
<label class="cb">
<input type="checkbox" class="item" value="B">
<span class="box"></span> 选项 B
</label>
<label class="cb">
<input type="checkbox" class="item" value="C">
<span class="box"></span> 选项 C
</label>
<div id="show" style="margin-top:15px;"></div>
<script>
const all = document.getElementById("all");
const items = document.querySelectorAll(".item");
const show = document.getElementById("show");
all.addEventListener("change", () => {
items.forEach(i => i.checked = all.checked);
displayValues();
});
items.forEach(i => {
i.addEventListener("change", () => {
all.checked = [...items].every(i => i.checked);
displayValues();
});
});
function displayValues() {
const values = [...document.querySelectorAll(".item:checked")]
.map(i => i.value);
show.innerHTML = "选中：" + values.join(", ");
}
</script>
</body>
</html>
发表回复