单选按钮组应监听 change 事件而非 click 或 input；change 仅在选项真正切换时触发，天然保证值变更，需统一为同 name 的 radio 批量绑定，并在程序化修改 checked 后手动 dispatch change 事件。
单选按钮组怎么监听 value 变化
HTML 原生 <input type="radio"> 没有 change 以外的“值变化”事件，它不支持双向绑定或实时响应——只有用户真正点击并切换到另一个选项时，change 才触发。别试图监听 input 事件，它对 radio 完全无效。
正确做法是给整个按钮组（即 name 相同的一组 radio）统一监听 change，然后读取当前选中的 value：
document.querySelectorAll('input[name="gender"]').forEach(radio =>
radio.addEventListener('change', function() {
if (this.checked) {
console.log('选中值：', this.value); // 例如 'male' 或 'female'
}
})
);
为什么不能只监听单个 radio 的 click
监听 click 看似可行，但会误报：当用户点击已选中的 radio 时，click 仍会触发，但实际 value 没变，this.checked 还是 true，逻辑容易出错。
-
change只在选中状态真正切换时触发（从 false → true），天然过滤重复点击 - 同一 name 组里，浏览器保证最多一个 radio 的
checked为 true，所以只要监听到 change，就代表值已确定变更 - 不要依赖
document.querySelector('input[name="x"]:checked')在事件外读值——可能为空（没默认选中）或滞后
Vue/React 等框架里怎么处理
框架封装了底层细节，但原理没变：它们仍是靠监听 change + 绑定 name 和 v-model / value + onChange 来同步状态。
html-to-pptx-converter
下载
使用 PptxGenJS 和 Python 解析，将结构化的 HTML/CSS 幻灯片内容转换为原生、可编辑的 PowerPoint（.pptx）演示文稿。
立即学习“前端免费学习笔记（深入）”；
纯 HTML 场景下，你必须自己确保：
- 所有 radio 共享相同的
name属性（这是分组依据） - 至少一个 radio 有
checked属性（否则初始值为空，change第一次触发前无法获知默认选中项） - 避免用
id单独绑定事件——组内多个 radio，应统一委托或批量绑定
常见错误：表单提交后才发现值没更新
这通常是因为 JS 修改了 checked 属性但没触发 change 事件，导致监听逻辑没执行。比如：
document.querySelector('input[value="other"]').checked = true; // ✅ DOM 状态变了
// ❌ 但 change 事件不会自动触发，监听函数不会运行
如果需要程序化选中并触发逻辑，得手动 dispatch：
const radio = document.querySelector('input[value="other"]');
radio.checked = true;
radio.dispatchEvent(new Event('change', { bubbles: true }));
注意：直接改 checked 不等于“用户操作”，浏览器不会自动补发事件——这点极易被忽略，尤其在表单初始化或动态回填时。
