如何修改代码实现单选按钮选中时仅显示指定DIV？

核心问题 #

1. 触发逻辑错误：你的函数paymentSelectionPayPal()只绑定在<a>标签的onclick事件上，切换单选按钮时不会触发这个函数，所以单选切换时代码根本没执行，自然看不到div显示变化。
2. 未处理隐藏逻辑：你只设置了目标div显示，但没有隐藏其他div，就算函数执行了，之前显示的div还会留在页面上，导致效果不符合预期。
3. 初始状态缺失：默认选中了第一个单选按钮，但对应的div没有默认显示。

修正后的完整代码 #

HTML

<!-- 单选按钮组，添加onchange事件触发切换逻辑 -->
<input checked type="radio" name="slider" id="paypaloption1" onchange="paymentSelectionPayPal()">
<label for="paypaloption1">
    Text Here <span>£00.00</span>
    <div class="payment-selection-prompt">Prompt Text Here</div>
</label>

<input type="radio" name="slider" id="paypaloption2" onchange="paymentSelectionPayPal()">
<label for="paypaloption2">
    Text Here <span>£00.00</span>
</label>

<input type="radio" name="slider" id="paypaloption3" onchange="paymentSelectionPayPal()">
<label for="paypaloption3">
    Text Here <span>£00.00</span>
    <div class="payment-selection-prompt">Prompt Text Here</div>
</label>

<!-- 要切换显示的按钮容器 -->
<div id="paymentStartButtonPayPal1" class="paypal-button">PayPal Button 1</div>
<div id="paymentStartButtonPayPal2" class="paypal-button">PayPal Button 2</div>
<div id="paymentStartButtonPayPal3" class="paypal-button">PayPal Button 3</div>

CSS

.paypal-button {
    display: none; /* 默认隐藏所有按钮 */
}

JavaScript

// 页面加载时初始化，显示默认选中的按钮
window.onload = function() {
    paymentSelectionPayPal();
};

function paymentSelectionPayPal() {
    // 先隐藏所有按钮，避免多个按钮同时显示
    document.getElementById('paymentStartButtonPayPal1').style.display = 'none';
    document.getElementById('paymentStartButtonPayPal2').style.display = 'none';
    document.getElementById('paymentStartButtonPayPal3').style.display = 'none';

    // 根据选中的单选按钮显示对应按钮
    if (document.getElementById('paypaloption1').checked) {
        document.getElementById('paymentStartButtonPayPal1').style.display = 'block';
    } else if (document.getElementById('paypaloption2').checked) {
        document.getElementById('paymentStartButtonPayPal2').style.display = 'block';
    } else if (document.getElementById('paypaloption3').checked) {
        document.getElementById('paymentStartButtonPayPal3').style.display = 'block';
    }
}

关键修改说明 #

• 给每个单选按钮添加onchange="paymentSelectionPayPal()"，切换单选时立刻触发函数。
• 函数开头先隐藏所有按钮，确保同一时间只显示一个目标div。
• 新增window.onload事件，页面加载完成后自动执行一次函数，显示默认选中的单选对应的按钮。
• 将多个独立if改为else if，利用单选按钮互斥的特性优化逻辑效率。

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