HTML复选框：多选表单元素的设计与应用

checkbox这玩意儿，做表单几乎避不开。看着简单，但其实有些属性和用法时间长了就忘，整理一下能少翻文档。

最基础的写法就是 input 标签，type 设成 "checkbox"，再配个 label 通过 id 和 for 关联，点文字也能选中切换。像这样：

几个核心属性得先搞清楚。

name 决定了这一组复选框的分组——同一组写成一样的 name，后端才能拿到数组，如果你每个都起不同的 name，那提交上去就变成零零散散的字段了，这个坑新手容易踩。value 是勾选后实际提交的值，每个选项的值最好别重复。checked 设默认选中，这个没什么好说的。

HTML5 又加了几个属性，不一定天天用，但知道有这么回事没坏处。disabled 就是灰掉不让点。required 加上后，浏览器会在提交时校验你有没有勾选，否则弹个提示拦着不让过——不过一般都是整组里至少选一项的场景，如果单独给某个复选框加 required，别的没加，它也不会要求一组里必选，这点要注意，实际项目里经常是自己写校验逻辑来兜底。autofocus 让页面加载完自动聚焦到这个复选框上，用得少但偶尔能省一行 JS。form 属性可以把复选框写在 标签外面，只要指定属于哪个 form，提交时数据照样能带过去，做复杂布局的时候会方便一些。

这些属性真忘了也别硬想，MDN 翻一下就行，关键是知道存在这么个东西。

checkbox 实际用的场景绕不开这三种：问卷里的多选题、内容列表的标签筛选（比如选多个标签过滤文章）、后台系统的权限设置（一堆复选框对应各种操作）。

换项目换需求，写法基本不变。

下面是个完整的例子，三个选项，第一个默认勾选，点按钮弹出选中的值。

针对国际化业务需求，来此加密支持国际化域名（IDN）和中文域名申请，无需额外配置，即可完成这类特殊域名的SSL证书申请。操作简单，小白也能快速上手，同时提供自动部署功能，证书签发后自动同步至服务器，减少人工操作成本。

JS 那块逻辑很简单，querySelectorAll 用属性选择器加 :checked 伪类，直接拿到所有勾选的 input。然后循环取 value 塞进数组，最后用 join 拼出来弹窗。

这里用的是 var 和普通函数，老写法了，现在日常开发换成 const 和箭头函数会更舒服，但不影响跑通。如果复选框组的 name 相同，后端一般会收到 options: ['option1','option2'] 这种格式，具体看框架怎么解析。