单选按钮通过name属性实现分组，相同name的选项互斥，用户只能选择一项；使用checked属性设置默认选中项，并推荐结合label标签提升可访问性与用户体验。
HTML中的单选按钮（radio button）用于让用户在一组互斥选项中选择一项。用户只能从同一组中选择一个选项，这就是所谓的“单选”。
radio单选按钮的基本语法
使用 创建单选按钮。每个按钮通常配合一个 标签，提升可访问性和用户体验。
name 属性 是关键：只有 name 相同的 radio 按钮才会被归为一组，从而实现单选效果。不同 name 的按钮互不影响。
通过 name 属性实现分组
如果多个 radio 按钮的 name 值相同，浏览器会自动将它们视为一组，用户只能选中其中一个。
立即学习“前端免费学习笔记（深入）”；
例如以下两组性别和年龄段选择：
这两组分别独立操作，互不干扰。
设置默认选中项
使用 checked 属性可以让某个单选按钮在页面加载时默认被选中。
只需要在希望默认选中的 标签中添加 checked 或 checked=”checked” 即可。
此时，“蓝色”选项会默认被选中。注意：同一组中只应有一个按钮设置 checked，否则最后一个会生效。
提升可读性与可用性的建议
始终为 radio 搭配 ，并使用 for 属性关联 id，点击文字也能选中按钮。示例：避免同一组中多个 checked，防止逻辑混乱。服务端获取数据时，根据 name 获取对应 value，前端可通过 JavaScript 获取选中值。
基本上就这些。掌握 name 分组和 checked 默认选中，就能正确使用 HTML 单选按钮了。
以上就是HTML单选按钮的用法_HTML radio单选按钮分组与默认选中的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/1587873.html
微信扫一扫 
支付宝扫一扫 
