单选框组未选中时应通过监听父容器change事件并检查name下是否有checked项来实时显示提示文字，提示元素需设role="alert"、配合aria-invalid和aria-describedby以保障可访问性，且须处理重置事件同步状态。
单选框组没选中时怎么显示提示文字
单选框组本身不自带必填提示，必须靠外部逻辑控制提示显隐。核心思路是监听 change 事件 + 检查是否至少有一个 checked，再操作提示元素的 style.display 或类名。
- 不要用
required属性单独撑提示——它只在表单提交时触发原生校验，无法实时反馈 - 提示文字建议放在单选组下方，用
<span class="hint"></span>包裹，初始设为display: none - 监听整个单选组的父容器（如
<fieldset></fieldset>）比逐个绑定每个<input type="radio">更简洁
用 JavaScript 判断单选组是否已选中
关键不是看某个 radio 是否 checked，而是查这一组 name 下有没有任意一个被选中。用 document.querySelectorAll('input[name="xxx"]:checked') 最直接。
- 注意 name 值必须完全一致，大小写敏感；如果 name 含特殊字符（如点号、中括号），要用转义或属性选择器加引号
-
querySelectorAll(...).length === 0表示未选中，此时显示提示；否则隐藏 - 别用
form.checkValidity()——它对 radio 组支持不稳定，尤其在未设置required时可能返回true
避免重复绑定和状态残留
页面动态插入单选组、或使用框架（如 Vue/React）时，容易出现事件重复绑定或旧提示未清除的问题。
- 每次初始化前先用
element.removeEventListener('change', handler)清掉旧监听器 - 提示文字内容应与业务逻辑强关联，比如 “请选择付款方式” 而不是笼统的 “此项必填”
- 如果单选组被禁用（
disabled），也要同步隐藏提示，否则视觉上会误导用户
兼容性与可访问性注意事项
屏幕阅读器依赖 aria-invalid 和 aria-describedby 识别错误状态，纯 CSS 显示隐藏不够。
- 给单选组的父容器（如
<fieldset></fieldset>）添加aria-invalid="true"，并指向提示元素的 id - 提示元素需有
role="alert"，确保变化时能被读屏软件即时播报 - 不要仅靠颜色区分状态——红色提示文字需搭配图标或文字说明，满足 WCAG 对比度要求
<button type="reset"></button> 不会自动触发 change 事件，得手动监听 reset 事件并重置提示状态。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
