监听 radio change 事件可实时更新选中项，需同 name 构成互斥组；推荐事件委托绑定父容器，用 querySelector('input[name="x"]:checked') 获取值，并在页面加载后手动同步初始状态。
在 radio 单选框切换时实时更新当前选中项，核心是监听 change 事件（不是 click），并确保所有 radio 共享同一 name 属性，这样才能构成互斥组。
用 change 事件监听选中变化
change 事件只在用户真正改变选项（即从一个 radio 切换到另一个）后触发，且只对当前被选中的那个元素触发。它比 click 更准确，避免重复响应或未生效的点击。
- 给任意一个同组 radio 绑定
change即可，但推荐绑定到整个name组的父容器或使用事件委托 - 直接绑定示例：
<input type="radio" name="color" value="red"> 红色
<input type="radio" name="color" value="blue"> 蓝色
document.querySelectorAll('input[name="color"]').forEach(radio => {<br> radio.addEventListener('change', () => {<br> if (radio.checked) console.log('当前选中：', radio.value);<br> });<br> });
更简洁：用事件委托监听整个表单
避免为每个 radio 单独绑定，把事件监听器放在父级（如 form 或 div），利用事件冒泡捕获目标。
Java注释规范Skills
下载
当用户要求为 Java 代码添加注释、修改注释、审查注释、整理注释格式，或要求按照代码注释规范处理 Java 文件时，使用本技能。本技能用于统一生成和维护 Java 类注释模板、按 Git 对比 release 判断版本号、补充每行代码上方中文块注释、调整注释空行规则，并保持 Java 文件 UTF-8 无 BOM 编码。典型触发场景包括：补充类注释、更新 @version、检查 @author 来源、整理行尾注释、把注释放到代码上一行、检查注释是否符合规范、构建前检查 Java 注释风格。
- HTML 中确保所有 radio 在同一个容器内：
<form id="myForm">
<input type="radio" name="size" value="s"> S
<input type="radio" name="size" value="m"> M
<input type="radio" name="size" value="l"> L
</form> - JS 监听：
document.getElementById('myForm').addEventListener('change', e => {<br> if (e.target.type === 'radio' && e.target.name === 'size') {<br> console.log('尺寸已切换为：', e.target.value);<br> }<br> });
获取当前选中值的可靠方式
不要依赖 e.target.checked 判断（因为 change 事件触发时它一定为 true），而是用 querySelector 主动查当前选中项，更稳妥，尤其适合后续需要读取状态的场景。
立即学习“Java免费学习笔记（深入）”；
- 例如：
const selected = document.querySelector('input[name="theme"]:checked');<br> if (selected) {<br> console.log('当前主题：', selected.value);<br> } - 封装成函数便于复用：
function getRadioValue(name) {<br> const el = document.querySelector(`input[name="${name}"]:checked`);<br> return el ? el.value : null;<br> }<br> // 使用：<br> console.log(getRadioValue('category'));
注意初始化时同步状态
页面加载后，如果已有默认选中项（比如 HTML 中写了 checked），需手动执行一次更新逻辑，否则初始状态不会被“实时捕获”。
- 简单做法：在绑定事件后立即调用一次获取逻辑：
updateUI(); // 自定义更新函数<br> form.addEventListener('change', updateUI); - 或在 DOM 加载完成后读取一次：
document.addEventListener('DOMContentLoaded', () => {<br> const init = getRadioValue('mode');<br> if (init !== null) handleModeChange(init);<br> });
