name相同才能互斥，因浏览器原生将同名radio归为一组，选中一个自动清空其余checked；联动时需监听change事件，禁用同时清除checked/selectedIndex等值，避免提交残留。
直接用 name 相同的两个 <input type="radio"> 就能实现“是否”二选一，不需要 JS 也能保证互斥；但若需联动其他控件（如启用/禁用后续字段），就得监听 change 事件并操作 disabled 属性。
为什么 name 相同才能互斥
浏览器原生行为：同一 name 值下的所有 radio 按钮自动组成一个互斥组。选中其中一个，其余同名 radio 的 checked 状态会被自动清空。这是 HTML 规范定义的行为，不依赖 JS。
- 必须写
name="yesno"（或任意一致值），不能漏、不能拼错大小写 -
value必须不同，例如value="yes"和value="no"，否则提交时无法区分选择 - 推荐加
<label>包裹或用for绑定，提升点击热区和可访问性
如何监听是否切换并控制后续字段
常见场景是：“是否启用某功能” → 若选“否”，则禁用并清空下方配置项。关键点在于：仅设 disabled = true 不够，必须同时清除 checked，否则表单提交仍可能带上旧值。
- 监听
change而非click：确保用户通过键盘空格选中时也能触发 - 禁用时要同步执行
element.checked = false，尤其对<input type="radio">和<select> - 避免用
style.display = 'none'替代disabled—— 它不影响表单提交，数据仍会发到后端
示例逻辑：
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
立即学习“前端免费学习笔记（深入）”；
document.querySelectorAll('input[name="enableFeature"]').forEach(radio => {
radio.addEventListener('change', () => {
const configGroup = document.getElementById('featureConfig');
if (radio.value === 'no') {
configGroup.querySelectorAll('input, select, textarea').forEach(el => {
el.disabled = true;
if (el.type === 'radio' || el.type === 'checkbox') el.checked = false;
else if (el.tagName === 'SELECT') el.selectedIndex = -1;
});
} else {
configGroup.querySelectorAll('input, select, textarea').forEach(el => el.disabled = false);
}
});
});
容易忽略的初始状态与 reset 行为
页面加载时，如果某个 radio 带有 checked 属性，它就是默认选中项；但调用 form.reset() 后，部分老版 Chrome 不会触发 change 事件，导致联动字段状态未更新。
- 初始化时手动触发一次
dispatchEvent(new Event('change'))，确保联动逻辑跑通 - 不要依赖
form.reset()自动恢复 UI 状态，重置后应主动调用你的控制函数 - 服务端必须再次校验：只接受
enableFeature=yes或enableFeature=no，拒绝缺失或非法值
最易出错的是把“视觉隐藏”当“逻辑禁用”，或者以为设了 disabled 就自动清空值——其实 radio 的 checked 状态和 disabled 是正交属性，得分开处理。
