HTML多选框需用<input type="checkbox">实现，同组选项共享name属性、各具唯一value，配合<label>提升可访问性；默认选中用checked，JS通过checked属性控制，提交后同名值以数组形式接收。
用 HTML 创建多选框，核心是使用 <input type="checkbox">，而不是 <input type="text"> 或 <select> 的 multiple 属性（后者不适用于“标签式输入”场景）。多选框的本质是让用户从一组选项中自由勾选多个项，每项独立控制，提交时以数组形式传递。
多选框的基本结构
每个选项由一个 <input type="checkbox"> 和配套的 <label> 组成：
- 所有相关 checkbox 必须共享相同的
name属性（如name="hobby"），这样表单提交时才会被识别为同一组数据； - 每个 checkbox 需有唯一
value（如"reading"、"coding"），这是后端真正接收的值； - 推荐用
<label>包裹或通过for关联，提升点击区域和可访问性。
示例代码：
<form> <label><input type="checkbox" name="hobby" value="reading"> 阅读</label> <label><input type="checkbox" name="hobby" value="coding"> 编程</label> <label><input type="checkbox" name="hobby" value="music"> 音乐</label> </form>
设置默认选中与交互控制
- 加
checked属性可预设选项（如<input ... checked>）； - JavaScript 中可通过
element.checked = true/false动态设置状态； - 获取已选项：
document.querySelectorAll('input[name="hobby"]:checked')，遍历取.value即可。
注意事项
- 不要混用
name值——不同组的多选框必须用不同name，否则会相互干扰； - 提交后，同名 checkbox 的选中值在服务端通常解析为数组（如 PHP 的
$_POST['hobby']是数组）； -
multiple属性对<input type="checkbox">无效，它只对<select>、<input type="file">和少数其他类型起作用。
和 select multiple 的区别
<select multiple> 是下拉列表多选，依赖 Ctrl/Command 键操作，移动端体验差，且无法直观展示已选项；而 checkbox 多选更直接、语义清晰、适配所有设备，适合兴趣、权限、分类等明确枚举的场景。
立即学习“前端免费学习笔记（深入）”；
不复杂但容易忽略。
