怎样创建单选按钮交互_INPUT标签TYPE属性设为RADIO-html教程-PHP中文网

radio单选按钮必须用name属性分组，name值完全相同时浏览器才将其视为一组并实现互斥选择；name区分大小写且需逐字符一致，不同组name必须不同；value决定提交值，label应绑定id提升体验；默认选中用checked属性；获取选中值应使用document.queryselector('input[name="xxx"]:checked')并判空。

怎样创建单选按钮交互_input标签type属性设为radio

radio 单选按钮必须用 name 属性分组

单选按钮不是独立工作的，浏览器靠 name 值识别哪些 <input type="radio"> 属于同一组。如果所有 radio 的 name 不同，那就变成多个互不干扰的“单选”，实际效果等同于多个复选框。

常见错误：只改了 id 和 value，漏写或写错 name，导致无法互斥选择。

name 值必须完全一致（大小写敏感），例如都用 name="gender"
每项应配唯一 value，提交时只发送被选中项的 value 字符串
建议为每个 radio 配合 <label></label>，用 for 关联 id，提升可点击区域和无障碍支持

<label><input type="radio" name="level" value="beginner"> 入门</label><br><label><input type="radio" name="level" value="advanced"> 进阶</label>

默认选中用 checked 属性，不要用 JavaScript 模拟

设置默认选项，直接在 HTML 中加 checked 属性即可，这是语义正确、兼容性好、且服务端渲染友好的方式。用 JS 在 DOM 加载后赋值 checked = true 容易造成闪烁或状态不同步。

Html2md

使用 Readability + Turndown 将 HTML 页面转换为干净的、Agent 友好的 Markdown。去除导航栏、广告、页脚、Cookie 横幅、社交按钮等干扰元素。支持 URL...

下载

checked 是布尔属性，写上即生效，无需 checked="true"
同一组中最多只能有一个 checked，多写也只以第一个为准
如果初始无默认项，就都不写 checked；不要写 checked="false"——这反而会触发选中

<input type="radio" name="theme" value="dark" checked> 暗色<br><input type="radio" name="theme" value="light"> 亮色

获取 radio 选中值要用 querySelector 而非 getElementsByName

document.getElementsByName("xxx") 返回的是 HTMLCollection，不能直接取 .value；而 document.querySelector('input[name="xxx"]:checked') 直接返回当前选中的元素节点，安全可靠。

若没选中任何项，querySelector(...:checked) 返回 null，需判空再取 .value
避免用 getElementsByName 遍历判断 checked，冗余且易出错
表单提交时，只有 checked 的 radio 才会随 name/value 发送到服务端

const selected = document.querySelector('input[name="payment"]:checked');<br>if (selected) {<br>  console.log(selected.value); // 如 "credit"<br>} else {<br>  console.log('未选择支付方式');<br>}