Yii2 隐藏表单字段 onchange radio

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

您的代码存在多个问题

你不是 loading/registring 任何地方使用 $this->registerJs($script,\yii\web\View::POS_READY) 的脚本。
当使用 javascript document.getElementById().

.val()

.value

javascript

.show()

.hide()

然后，即使您完成了上述步骤，它仍然无法工作，因为您没有绑定任何事件到无线电输入，您的脚本只是一个内联脚本，它将在页面加载时调用。
您在 radioList 中提供的 ID radio 将是所有收音机列表输入所在容器的 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 radio

Yii2 hide form field onchange radio

javascript

onchange

hide

yii2