本文介绍如何通过监听单选按钮（radio）的 change 事件，实时控制“add”按钮的显示与隐藏状态：选中 producta 时隐藏 add 按钮，选中 productb 时恢复显示，同时确保 buy 按钮始终可见。
本文介绍如何通过监听单选按钮（radio）的 change 事件，实时控制“add”按钮的显示与隐藏状态：选中 producta 时隐藏 add 按钮，选中 productb 时恢复显示，同时确保 buy 按钮始终可见。
在表单交互中，根据用户选择动态调整界面元素是常见需求。原始代码存在一个关键缺陷：脚本在页面加载时立即执行，但此时 radio 按钮很可能尚未被选中（即 document.querySelector(...:checked) 返回 null），导致运行时错误或逻辑失效。正确的做法是响应式监听用户操作，而非一次性静态判断。
以下为推荐实现方案，使用现代 DOM API 实现健壮、可维护的交互逻辑：
<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 initiallyChecked = document.querySelector('input[name="radio-group"]:checked');
if (initiallyChecked) {
addBtn.style.display = initiallyChecked.value === 'ProductA' ? 'none' : 'inline-block';
}
</script>关键要点说明：
- ✅ 使用 change 事件而非 click：确保仅在选项真正切换时触发，避免重复响应；
- ✅ 遍历所有同名 radio 元素并统一绑定事件，语义清晰且兼容多选项扩展；
- ✅ 初始化逻辑兜底：若 HTML 中已设置 checked 属性（如 ），脚本会主动同步初始 UI 状态，提升用户体验一致性；
- ⚠️ 避免直接操作 style.display 的硬编码值（如 'block'）——按钮默认为 inline-block，设为 'block' 可能破坏水平排列。建议统一使用 'inline-block' 或通过 CSS 类控制（更佳实践见下文）；
进阶建议（推荐生产环境采用）：
将样式逻辑解耦至 CSS，提升可维护性：
#add.hidden {
display: none !important;
}// JS 中仅切换类名
btn.addEventListener('change', () => {
addBtn.classList.toggle('hidden', this.value === 'ProductA');
});该方式便于全局样式管理、支持 CSS 过渡动画，并符合关注点分离原则。最终效果简洁可靠：用户选择 ProductA → ADD 按钮平滑消失；切换回 ProductB → 按钮立即恢复，BUY 按钮全程不受影响。
