本文详解如何通过监听 radio 按钮的 change 事件，实时控制“add”按钮的显示与隐藏：选中 producta 时隐藏该按钮，选中 productb 时恢复显示，确保交互响应及时、代码健壮且兼容初始未选中状态。
本文详解如何通过监听 radio 按钮的 change 事件，实时控制“add”按钮的显示与隐藏：选中 producta 时隐藏该按钮，选中 productb 时恢复显示，确保交互响应及时、代码健壮且兼容初始未选中状态。
在 Web 表单交互中，根据用户对单选按钮（radio）的选择动态控制其他 UI 元素的可见性，是常见且实用的需求。例如，当用户选择“ProductA”时，业务逻辑可能要求禁用或隐藏“ADD”操作按钮；而选择“ProductB”时则需恢复其可用性。关键在于：不能仅在页面加载时执行一次判断，而必须持续响应用户的切换操作。
原始代码存在两个核心问题：
- 执行时机错误：脚本在 DOM 加载后立即读取 :checked 元素，但此时若无默认选中项，querySelector(...).value 将抛出 Cannot read property 'value' of null 错误；
- 缺乏事件监听：未绑定 change 事件，导致用户后续切换选项时界面无法更新。
✅ 正确做法是：
- 使用 document.querySelectorAll 获取全部同名 radio 元素；
- 为每个 radio 绑定 change 事件监听器；
- 在回调中通过 event.target.value 获取当前选中值，并动态设置 #add 按钮的 display 样式。
以下是完整、健壮的实现代码：
<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"]');
// 为每个 radio 绑定 change 事件
radioBtns.forEach(btn => {
btn.addEventListener('change', function() {
if (this.value === 'ProductA') {
addBtn.style.display = 'none';
} else if (this.value === 'ProductB') {
addBtn.style.display = 'inline-block'; // 推荐使用 inline-block 保持按钮行内特性
}
});
});
// ✅ 可选：初始化状态（处理页面加载时已有默认选中的情况）
const initialChecked = document.querySelector('input[name="radio-group"]:checked');
if (initialChecked) {
addBtn.style.display = initialChecked.value === 'ProductA' ? 'none' : 'inline-block';
}
</script>? 注意事项与最佳实践：
- 始终使用 change 而非 click 事件——change 在选项真正切换后触发，语义更准确，且兼容键盘操作（如 Tab + 空格）；
- 避免直接操作 style.display，如需更高可维护性，推荐通过 CSS 类控制显隐：
.hidden { display: none !important; }addBtn.classList.toggle('hidden', this.value === 'ProductA'); - 若表单含更多选项或复杂逻辑，建议将映射关系抽离为配置对象，提升可扩展性；
- 注意 display: block 可能破坏按钮原有行内布局，inline-block 是更安全的默认值。
该方案兼顾健壮性、可读性与可维护性，适用于现代浏览器，无需依赖外部库，可直接集成至任意 HTML 页面中。
