JavaScript 中表单事件怎么在 radio 单选框切换时实时更新当前选中项-js教程-PHP中文网

监听 radio change 事件可实时更新选中项，需同 name 构成互斥组；推荐事件委托绑定父容器，用 queryselector('input[name="x"]:checked') 获取值，并在页面加载后手动同步初始状态。

javascript 中表单事件怎么在 radio 单选框切换时实时更新当前选中项

在 radio 单选框切换时实时更新当前选中项，核心是监听 change 事件（不是 click），并确保所有 radio 共享同一 name 属性，这样才能构成互斥组。

用 change 事件监听选中变化

change 事件只在用户真正改变选项（即从一个 radio 切换到另一个）后触发，且只对当前被选中的那个元素触发。它比 click 更准确，避免重复响应或未生效的点击。

给任意一个同组 radio 绑定 change 即可，但推荐绑定到整个 name 组的父容器或使用事件委托

直接绑定示例：
红色
蓝色

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 在同一个容器内：

   S
   M
   L

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 主动查当前选中项，更稳妥，尤其适合后续需要读取状态的场景。

例如：

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>
});