Question

我有一个radioList，带有2个值1和2。如果收音机设置为2，我想隐藏textInput。我尝试过：

$script = <<< JS

$(document).ready(function () {
    if(document.getElementById('radio').val() == '2' ) {
        document.getElementById('textInput').style.display = 'none';
        document.getElementById('textInput').hide();
    } else {
        document.getElementById('textInput').show();
    }
});

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

echo $form->field($model, 'radio')->radioList(['1' => '1', '2' => '2'], ['id' => 'radio']);
echo $form->field($model, 'textInput')->textInput(['id' => 'textInput']);

有什么想法吗？

Answer 1

您的代码存在多个问题

您不会在任何地方使用$this->registerJs($script,\yii\web\View::POS_READY)加载/注册脚本。
使用JavaScript .val()时，没有任何名称为.value的方法，而是document.getElementById()。
javascript中没有任何方法.show()和.hide()
然后，即使您完成了上述步骤，它也仍然无法正常工作，因为您没有绑定任何与广播输入相关的事件，您的脚本只是一个内嵌脚本，当页面出现时会被调用已加载。
您在radio中提供的ID radioList将是所有无线电列表输入所在的容器的id。
您需要隐藏输入的完整容器，而不仅仅是输入，以便标签也被隐藏并与输入一起显示。

由于您使用了javascript标签，因此我正在使用addEventListner绑定事件，请参见下面的代码并将其添加到视图顶部。

$script = <<< JS
document.querySelectorAll("#radio input[type='radio']").forEach(function(element){
    element.addEventListener('click',function(){
        if(this.value == '2' ) {
            document.querySelector('#textInput').parentElement.style.display = 'none';
        } else {
            document.querySelector('#textInput').parentElement.style.display = 'block';
        }
    });
});
JS;
$this->registerJs($script, \yii\web\View::POS_READY);

Yii2隐藏表单字段onchange收音机

1 个答案: