基于单选按钮选择控制按钮显示/隐藏的实现方法问询

你的需求是选中ProductA时隐藏ADD按钮，选中ProductB时显示ADD和BUY按钮，当前代码的问题在于只在页面加载时执行一次判断，没有监听单选框的切换事件，而且未处理初始无选中状态的情况，以下是修复后的完整实现：

问题分析 #

原代码仅在页面加载时获取一次选中值并修改按钮状态，但用户切换单选框时不会触发更新，同时没有考虑页面加载时没有单选框被选中的场景（此时document.querySelector('input[name="radio-group"]:checked')会返回null，直接取value会报错）。

解决方案 #

1. 封装一个控制按钮显示的函数，统一处理逻辑
2. 为所有单选框绑定change事件，切换时触发函数更新状态
3. 页面加载时初始化执行一次函数，确保初始状态正确

完整代码示例 #

<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 radioGroup = document.querySelectorAll('input[name="radio-group"]');
const addBtn = document.getElementById('add');
const buyBtn = document.getElementById('buy');

// 封装按钮控制函数
function updateButtonState() {
    const selectedValue = document.querySelector('input[name="radio-group"]:checked')?.value;
    
    if (selectedValue === 'ProductA') {
        addBtn.style.display = 'none';
        buyBtn.style.display = 'block'; // ProductA时BUY按钮保持显示
    } else if (selectedValue === 'ProductB') {
        addBtn.style.display = 'block';
        buyBtn.style.display = 'block';
    } else {
        // 无选中状态时的默认处理，可根据需求调整
        addBtn.style.display = 'none';
        buyBtn.style.display = 'none';
    }
}

// 为每个单选框绑定change事件
radioGroup.forEach(radio => {
    radio.addEventListener('change', updateButtonState);
});

// 页面加载时初始化状态
updateButtonState();
</script>

代码说明 #

• 使用可选链操作符?.避免无选中状态时的报错
• 封装updateButtonState函数，将按钮显示逻辑集中管理，便于维护
• 给所有单选框添加change监听，确保切换时实时更新按钮状态
• 初始化执行函数，保证页面加载时按钮状态符合当前选中情况

内容的提问来源于stack exchange，提问作者chris_fv