本文介绍如何通过监听单选按钮（radio）的 change 事件，动态显示或隐藏指定按钮（如“add”按钮），实现用户交互驱动的 ui 状态更新，避免页面加载时因未选中项导致脚本执行失败。
本文介绍如何通过监听单选按钮（radio）的 change 事件，动态显示或隐藏指定按钮（如“add”按钮），实现用户交互驱动的 ui 状态更新，避免页面加载时因未选中项导致脚本执行失败。
在 Web 表单开发中，常需根据用户对单选按钮（）的选择，动态调整其他控件的可见性。例如：当用户选择 “ProductA” 时隐藏 “ADD” 按钮，选择 “ProductB” 时恢复显示——这类需求不能依赖页面加载时的一次性判断（如原代码中直接读取 :checked），因为初始状态下可能无选项被选中，导致 querySelector(...).value 报错（Cannot read property 'value' of null）。
正确的做法是为所有相关单选按钮绑定 change 事件监听器，在每次选择变更后实时响应并更新 DOM 状态。
以下为完整、健壮的实现方案：
<input id="option1" value="ProductA" name="radio-group" type="radio">
<label for="option1" class="radio-custom-label">ProductA</label>
<input id="option2" value="ProductB" name="radio-group" type="radio">
<label for="option2" class="radio-custom-label">ProductB</label>
<button id="add">ADD</button>
<button id="buy">BUY</button>
<script>
const addBtn = document.getElementById('add');
const radioBtns = document.querySelectorAll('input[name="radio-group"]');
// 为每个单选按钮注册 change 事件监听
radioBtns.forEach(radio => {
radio.addEventListener('change', function() {
if (this.value === 'ProductA') {
addBtn.style.display = 'none';
} else if (this.value === 'ProductB') {
addBtn.style.display = 'inline-block'; // 推荐使用 inline-block 保持按钮行内布局
}
});
});
</script>✅ 关键优化说明：
- 使用 change 事件而非 click，确保语义准确（值真正改变时才触发）；
- 遍历 querySelectorAll 返回的 NodeList，为每个 绑定监听器，兼容任意数量选项；
- 使用 this.value 直接获取当前触发事件的按钮值，简洁可靠；
- 显式设置 display: 'inline-block'（而非 'block'），避免按钮因块级显示而换行，破坏原有布局。
⚠️ 注意事项：
- 若页面存在默认选中项（如添加 checked 属性），建议在脚本末尾补充一次初始化逻辑，确保首屏状态与 UI 一致；
- 生产环境推荐使用 CSS 类控制显隐（如 .hidden { display: none; }），便于统一维护样式与动画；
- 如需支持无障碍访问（a11y），应同步管理 aria-hidden 或 disabled 属性，并确保焦点逻辑合理。
通过该模式，你可轻松扩展至多组联动控件（如显示/隐藏不同表单字段、切换价格模块等），构建响应灵敏、用户体验一致的动态表单界面。
