如何在Yii2中显示/隐藏基于radioList更改的div框？

<?php
use yii\helpers\Html;
use yii\widgets\ActiveForm;
?>

<?php $form = ActiveForm::begin(); ?>

<?= $form->field($model, 'radio_attribute')->radioList([
    'value1' => 'Option 1',
    'value2' => 'Option 2',
    'value3' => 'Option 3',
], [
    'id' => 'radio-list', // 设置radioList的id
])->label(false); ?>

<div id="div-box1" style="display: none;">
    <!-- div框内容1 -->
</div>

<div id="div-box2" style="display: none;">
    <!-- div框内容2 -->
</div>

<div id="div-box3" style="display: none;">
    <!-- div框内容3 -->
</div>

<?php ActiveForm::end(); ?>

<?php
// 注册JavaScript代码
$script = <<< JS
$(document).ready(function(){
    // 监听radioList的change事件
    $('#radio-list input[type="radio"]').change(function(){
        var selectedValue = $(this).val();
        
        // 根据选中的值显示对应的div框
        if (selectedValue == 'value1') {
            $('#div-box1').show();
            $('#div-box2').hide();
            $('#div-box3').hide();
        } else if (selectedValue == 'value2') {
            $('#div-box1').hide();
            $('#div-box2').show();
            $('#div-box3').hide();
        } else if (selectedValue == 'value3') {
            $('#div-box1').hide();
            $('#div-box2').hide();
            $('#div-box3').show();
        }
    });
});
JS;

$this->registerJs($script);
?>