本文介绍如何通过监听单选按钮（radio）的 change 事件，实时控制按钮（如“ADD”）的显隐状态——选中 ProductA 时隐藏，选中 ProductB 时显示，确保交互响应及时且逻辑健壮。
本文介绍如何通过监听单选按钮（radio）的 `change` 事件，实时控制按钮（如“add”）的显隐状态——选中 producta 时隐藏，选中 productb 时显示，确保交互响应及时且逻辑健壮。
在表单交互开发中，根据用户的选择动态调整界面元素（如按钮的可见性）是常见需求。直接在页面加载时读取初始选中状态（如原代码中使用 document.querySelector(...).value）存在明显缺陷：它仅执行一次，无法响应后续用户切换操作，导致行为失效。
正确做法是为所有相关单选按钮绑定 change 事件监听器，并在回调中动态更新目标按钮的 CSS 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"]');
// 为每个单选按钮注册 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：change 在选项真正切换后触发，语义更准确，兼容键盘操作（如 Tab + 空格）；
- ✅ 避免 document.querySelector(...).value 初始化陷阱：若页面加载时无默认选中项，该语句会报错（null 的 value）；因此建议配合 :checked 选择器做安全初始化；
- ✅ 推荐 display: inline-block 而非 block：按钮默认为 inline 元素，设为 block 会导致换行，破坏水平布局；inline-block 既保留样式可控性，又维持原有流式排版；
- ⚠️ 无障碍友好提示：若需更高可访问性，可配合 aria-hidden="true" 和 aria-disabled="true" 同步控制语义层可见性与交互能力；
- ? 扩展性提示：如未来增加 ProductC 并要求“仅 ProductB 显示 ADD 按钮”，只需修改条件判断逻辑，无需重构事件绑定结构。
该方案简洁、健壮、符合现代 Web 开发实践，适用于各类基于表单控件的动态 UI 场景。
