复选框和单选按钮组
让用户从一组选项中选择一个或多个选项
复选框和单选按钮组 是 CoddyKit 上的免费 HTML Academy 课时。 这是第 3 节课，共 4 节。 你可以在下方免费阅读本课时的完整内容 — 然后在浏览器中使用内置代码编辑器和全天候 AI 导师进行实践。 这是 HTML Academy 学习路径的一部分，你的进度在网页和 CoddyKit 应用中同步。 HTML Academy 课程共包含 4 节课。
复选框
复选框允许用户选择零个、一个或多个选项：
<label>
<input type="checkbox" name="terms" value="agreed"> I agree to the Terms
</label>
<!-- Each checkbox is independent -->
<!-- checked attribute = pre-checked -->
<input type="checkbox" name="newsletter" value="yes" checked>复选框提交
复选框只有在选中时才会提交：
<form>
<input type="checkbox" name="hobby" value="reading"> Reading<br>
<input type="checkbox" name="hobby" value="coding"> Coding<br>
<input type="checkbox" name="hobby" value="gaming"> Gaming<br>
</form>
<!-- If reading and coding are checked:
hobby=reading&hobby=coding -->
<!-- Unchecked boxes send nothing -->使用 fieldset 对复选框分组
使用 fieldset + legend 将相关复选框分组：
<fieldset>
<legend>Select your interests</legend>
<label><input type="checkbox" name="interest" value="html"> HTML</label>
<label><input type="checkbox" name="interest" value="css"> CSS</label>
<label><input type="checkbox" name="interest" value="js"> JavaScript</label>
<label><input type="checkbox" name="interest" value="python"> Python</label>
</fieldset>单选按钮
单选按钮允许用户从一组选择中恰好选中一个选项：
<fieldset>
<legend>Preferred plan</legend>
<label><input type="radio" name="plan" value="free"> Free</label>
<label><input type="radio" name="plan" value="pro"> Pro</label>
<label><input type="radio" name="plan" value="enterprise"> Enterprise</label>
</fieldset>
<!-- All radios in a group share the same name attribute -->
<!-- Selecting one deselects the others -->checked 属性
使用 checked 属性预先选中单选按钮或复选框：
<fieldset>
<legend>Skill level</legend>
<label><input type="radio" name="level" value="beginner" checked> Beginner</label>
<label><input type="radio" name="level" value="intermediate"> Intermediate</label>
<label><input type="radio" name="level" value="advanced"> Advanced</label>
</fieldset>设置复选框和单选按钮的样式
使用 label 技巧创建自定义样式的复选框：
<label class="custom-check">
<input type="checkbox" name="agree">
<span class="checkmark"></span>
I agree
</label>
/* Hide native input, style the span: */
.custom-check input { opacity: 0; width: 0; }
.checkmark {
width: 1.25rem; height: 1.25rem;
border: 2px solid #ddd; border-radius: 3px;
display: inline-block; vertical-align: middle;
}
.custom-check input:checked + .checkmark { background: #0070f3; }indeterminate 状态
复选框可以处于 indeterminate 状态（既未选中，也未取消选中）：
<input type="checkbox" id="select-all">
<script>
// Set via JavaScript only -- no HTML attribute
document.getElementById('select-all').indeterminate = true;
// Visually shown as a dash (−) in most browsers
// Used for "select all" when some children are checked
</script>不预选单选按钮
有时不预先选中单选按钮会更好：
- 预选会让用户认为该选项是推荐选项
- 对于没有明确默认值的必选项（性别、方案），请保持未选中状态
- 添加
required，确保用户明确做出选择
<fieldset>
<legend>Gender</legend>
<label><input type="radio" name="gender" value="m" required> Male</label>
<label><input type="radio" name="gender" value="f" required> Female</label>
<label><input type="radio" name="gender" value="nb" required> Non-binary</label>
<label><input type="radio" name="gender" value="prefer_not" required> Prefer not to say</label>
</fieldset>复选框：checked 与 value
关于复选框提交，有两点需要注意：
<!-- The value sent when checked: -->
<input type="checkbox" name="subscribe" value="yes">
<!-- Submits: subscribe=yes when checked -->
<!-- If value is omitted, default value is 'on' -->
<!-- JavaScript checked state: -->
const cb = document.querySelector('input[name="subscribe"]');
console.log(cb.checked); // true or false
console.log(cb.value); // 'yes' (always, even when unchecked)单选按钮组的键盘导航
单选按钮组的键盘行为：
- Tab 将焦点移入分组中的已选单选按钮或第一个单选按钮
- 方向键（↑/↓ 或 ←/→）在各选项之间循环切换
- Tab 将焦点移出分组，移至下一个可聚焦元素
全选模式
选择或取消选择所有复选框的模式：
<label>
<input type="checkbox" id="select-all"> Select all
</label>
<fieldset id="items">
<label><input type="checkbox" class="item" value="1"> Item 1</label>
<label><input type="checkbox" class="item" value="2"> Item 2</label>
<label><input type="checkbox" class="item" value="3"> Item 3</label>
</fieldset>
<script>
document.getElementById('select-all').addEventListener('change', function() {
document.querySelectorAll('.item').forEach(cb => cb.checked = this.checked);
});
</script>快速检查
什么样的 name 属性规则会使单选按钮属于同一分组？
回顾：复选框和单选按钮
复选框和单选按钮要点：
- 复选框 — 可选择多个选项；仅在选中时提交
- 单选按钮 — 恰好选择一个选项；通过
name分组 - 两者都使用
checked属性进行预选 - 使用
<fieldset>+<legend>包裹 - 使用方向键在单选按钮组内导航
常见问题解答
「复选框和单选按钮组」课时是免费的吗？
是的 — 「复选框和单选按钮组」的完整文本可在网页上免费阅读。要进行交互式练习（内置代码编辑器和全天候 AI 导师）并解锁 HTML Academy 课程的其余内容，请升级到 CoddyKit PRO。 HTML Academy 课程共包含 4 节课。
「复选框和单选按钮组」这节课中我会学到什么？
让用户从一组选项中选择一个或多个选项 你通过在浏览器中直接运行的动手代码来练习 HTML Academy，全天候 AI 导师会在你学习这节课的过程中回答你的问题。
学习 HTML Academy 需要有经验吗？
无需任何先前经验。CoddyKit 上的 HTML Academy 课程适合初学者到高级学习者，你可以从这里开始或从头开始，按照自己的节奏学习。 这是第 3 节课，共 4 节。
「复选框和单选按钮组」课时需要多长时间？
大多数 CoddyKit 课程大约需要 5–10 分钟。每节课都很精短且互动，所以你能稳步进步，并在网页和应用中从离开的地方继续。
我能在这节 HTML Academy 课中编写并运行代码吗？
能。每节 HTML Academy 课都包含内置代码编辑器，你可以在浏览器中直接编写并运行真实代码，并获得即时 AI 反馈 — 无需本地设置。