HTML中如何创建单选按钮和复选框-html教程-PHP中文网

单选按钮和复选框正常工作的关键是name属性一致且type值正确；name决定单选互斥组，value决定提交值，label包裹提升可访问性，js获取需判空并手动触发change事件。

html中如何创建单选按钮和复选框

单选按钮和复选框能正常互斥或独立选中，关键就两点：name 属性写对、type 值别写错。其他看似可选的细节（比如 label 包裹、id/for 配对、value 设置），漏掉一个就可能在表单提交、JS 获取或移动端点击时出问题。

单选按钮必须用相同的 `name` 才算“一组”

浏览器只靠 name 判断哪些 input[type="radio"] 属于同一组。如果漏写 name，或两组用了同一个 name（比如性别和婚姻状况都叫 status），就会出现“点了男还能点已婚”或“点了男就自动取消未婚”这种反直觉行为。

name 值必须完全一致（区分大小写），且不能为空
每组单选应使用语义化名称，如 gender、payment_method
务必为每个 radio 设置 value，否则提交时拿到的是空字符串或 on
用 checked 指定默认项，但同一组里只能有一个带该属性

复选框的 `name` 可以相同，但后端接收方式不同

复选框天然支持多选，name 相同只是方便批量处理；但服务端能否正确解析为数组，取决于 name 写法和后端框架。PHP 习惯加 []（如 hobby[]），而 Node.js/Python 通常靠请求体解析逻辑决定，不强制要求方括号。

Article To Html

文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。

下载

若用 name="hobby"，多数后端只收到最后一个勾选项的 value
若用 name="hobby[]"，PHP 会自动转成数组；其他语言需手动解析同名参数列表
每个 checkbox 也应有 value，否则勾选后提交值是 on
checked 可多处使用，没有互斥限制

不包 `label` 就等于放弃可访问性和触控体验

直接写 <input type="radio">男 看似省事，但用户只能精准点击那个小圆圈——在手机上几乎点不中。用 label 包裹或用 for 关联，能让整个文字区域响应点击，同时屏幕阅读器也能正确读出选项含义。

推荐写法：<label><input type="radio" name="gender" value="male">男</label>
若需分离结构，用 id + for：<input id="male" type="radio" name="gender" value="male"><label for="male">男</label>
避免 label 里嵌套多个 input，会导致语义混乱

JS 动态操作时，别只查 `checked` 状态

用 JS 获取单选组当前值，不能只遍历所有 radio 然后找 checked === true —— 如果用户还没点过任何一项，所有都是 false，你得知道这是“未选择”还是“默认项被清空”。更稳妥的方式是先查 DOM 中是否有 checked，再 fallback 到初始 checked 属性或预设默认值。

获取单选值：document.querySelector('input[name="gender"]:checked')?.value
设置单选值：document.querySelector('input[value="female"][name="gender"]').checked = true
复选框批量取值：[...document.querySelectorAll('input[name="hobby[]"]:checked')].map(el => el.value)
注意：动态设置 checked 后，change 事件不会自动触发，需手动 dispatchEvent

最容易被忽略的其实是 value —— 很多人留空或写死 "true"，结果后端收不到有意义的数据。它不是装饰属性，而是表单提交时真正发送的字段值。