单选按钮组通过change事件控制复选框显隐，需避免用click监听和visibility:hidden；复选框反向影响单选时应直接赋值checked防止循环；vue/react中须用响应式数据统一驱动；隐藏复选框需移除name或设disabled才能阻止提交。
单选按钮组触发复选框显隐控制
单选按钮组本身不直接控制复选框状态，但常用于「条件切换」：比如选中 type=custom 时才显示自定义选项的复选框。关键不是绑定值，而是监听 change 事件后操作 display 或 disabled 属性。
常见错误是监听 click 而非 change —— 在键盘操作（空格键切换）或初始默认选中时会漏掉；另一个坑是用 visibility: hidden 隐藏复选框，导致它仍参与表单提交且占据布局空间。
- 给单选按钮组统一
name，每个input[type="radio"]设唯一value - 为需要联动的复选框容器（如
<div class="checkbox-group">）设明确 ID 或 class <li>在 <code>change回调里用element.style.display = 'block' / 'none'控制显隐 - 若需禁用而非隐藏，改用
checkboxElement.disabled = true并配合opacity: 0.5视觉提示
复选框状态反向影响单选按钮默认值
当用户勾选某个复选框后，希望自动将单选按钮组设为特定项（例如勾选「含附件」就强制选中 priority=high），这属于「副作用写入」，必须小心避免循环触发。
典型陷阱是：监听复选框 change → 设置单选按钮 checked = true → 单选按钮又触发自己的 change 事件 → 逻辑错乱。解决方法是加标记或用 dispatchEvent 的 bubbles: false 控制传播，但更稳妥的是直接赋值不触发事件：
document.querySelector('input[value="high"]').checked = true;
注意：这行代码不会触发 change 事件，所以不会造成循环。但如果你依赖事件做后续同步（比如更新 URL 参数），就得手动补发一次 dispatchEvent(new Event('change', {bubbles: true}))。
Vue/React 中避免直接操作 DOM 控制联动
在 Vue 或 React 项目里硬写 document.getElementById + style.display 是反模式。状态应统一收口到响应式数据中。
Vue 示例中，用 v-model 绑定单选按钮的 radioValue，再用 v-if="radioValue === 'advanced'" 控制复选框区域渲染；React 则用 useState 存 radio 值，JSX 中通过三元表达式决定是否返回复选框 JSX 结构。
容易被忽略的是「初始状态同步」：如果后端返回的数据里复选框已勾选，但单选按钮没对应上，默认渲染会不一致。必须确保初始化时 radioValue 和复选框的 checked 状态由同一份数据源驱动，而不是分别从不同字段读取。
表单提交时复选框未提交的兼容性问题
联动后被隐藏或禁用的复选框，其 name 仍会随表单提交（除非设 disabled）。这是 HTML 规范行为，但常被误认为「隐藏=不提交」。
如果你希望隐藏即取消提交，有两个选择：
- 在提交前遍历所有复选框，对
offsetParent === null或style.display === 'none'的元素临时设disabled = true - 更干净的做法：移除其
name属性（checkbox.removeAttribute('name')），提交后再恢复 —— 注意不要用name=""，空 name 仍会提交空值
IE11 下 offsetParent 对 position: fixed 元素可能返回 null，建议统一用 getComputedStyle(checkbox).display === 'none' 判断可见性。
