如何在Yii2中根据单选列表切换显示/隐藏Div容器？

嘿，这个需求很常见，结合Yii的表单助手和一点前端JS就能轻松实现，我给你整理了完整的方案：

首先需要调整你原有的radioList代码——原来的itemOptions里给所有单选按钮设置了相同的id="radio"，这违反了HTML的唯一性规则，会导致JS选择器出错。我这里改成用class和name来定位元素：

<div>
    <p>Servizio aggiuntivo?</p>
    <?php 
    echo Html::radioList(
        'templates', 
        null, 
        ['Si' => 'Si', 'No' => 'No'], 
        [
            'encode' => false, 
            'itemOptions' => ['class'=>'radio-inline'],
            'separator' => '&nbsp;&nbsp;' // 可选，增加两个按钮之间的间距
        ]
    ); 
    ?>
</div>

<!-- 要动态显示/隐藏的Div容器，默认设置为隐藏 -->
<div id="additional-service-container" style="display: none; margin-top: 15px;">
    <!-- 这里放入你需要显示的内容，比如额外的表单字段、说明文本等 -->
    <h4>Dettagli servizio aggiuntivo</h4>
    <p>Inserisci i dettagli richiesti per il servizio aggiuntivo...</p>
    <!-- 示例：添加一个文本输入框 -->
    <?php echo Html::textInput('additional_details', null, ['class' => 'form-control']); ?>
</div>

接下来用jQuery（Yii默认集成了jQuery，所以直接用就行）来监听单选按钮的变化，控制Div的显示/隐藏：

// 等待DOM完全加载后执行
$(document).ready(function() {
    // 监听单选按钮的change事件
    $('input[name="templates"]').on('change', function() {
        const selectedVal = $(this).val();
        const targetDiv = $('#additional-service-container');
        
        // 根据选中值切换显示状态
        if (selectedVal === 'Si') {
            targetDiv.show();
        } else {
            targetDiv.hide();
        }
    });

    // 页面加载时检查初始选中状态（如果有默认选中值的话）
    const initialSelected = $('input[name="templates"]:checked').val();
    if (initialSelected === 'Si') {
        $('#additional-service-container').show();
    }
});

如果你不想用jQuery，也可以用原生JavaScript实现相同功能：

document.addEventListener('DOMContentLoaded', function() {
    const radioButtons = document.querySelectorAll('input[name="templates"]');
    const targetDiv = document.getElementById('additional-service-container');

    // 定义切换函数
    function toggleServiceDiv() {
        const selectedVal = document.querySelector('input[name="templates"]:checked')?.value;
        targetDiv.style.display = selectedVal === 'Si' ? 'block' : 'none';
    }

    // 给每个单选按钮绑定事件
    radioButtons.forEach(btn => btn.addEventListener('change', toggleServiceDiv));

    // 初始化检查
    toggleServiceDiv();
});

*小提示：*如果你用的是Yii 2.0，确保已经正确引入了yii\helpers\Html类；如果是Yii 1.x，对应使用CHtml::radioList，语法略有不同，但核心逻辑一致。

内容的提问来源于stack exchange，提问作者Angelo De Giacomo