📌  相关文章
📜  当复选框选中时显示 yii2 上的输入标签 (1)

📅  最后修改于: 2023-12-03 15:25:36.275000             🧑  作者: Mango

在 Yii2 中使用 JavaScript 显示或隐藏输入标签的方法

在 Yii2 中,我们需要使用 JavaScript 来显示或隐藏输入标签。通常情况下,我们将使用复选框作为触发器,以控制所需的输入字段的显示或隐藏。在本文中,我们将介绍如何在 Yii2 中使用 JavaScript 来显示或隐藏输入标签。

实现方法

我们需要在 Yii2 表单中添加一个复选框和我们要显示或隐藏的输入字段。然后,我们需要使用 JavaScript 代码,以便在复选框被选中时显示输入字段,而在未选中时则隐藏输入字段。

以下是代码示例:

    <?= $form->field($model, 'is_checked')->checkbox(['label' => '显示/隐藏输入框', 'uncheck' => null]) ?>

    <div id="input-field" style="display: none">
        <?= $form->field($model, 'input_value')->textInput() ?>
    </div>

    <script>
        $(function () {
            $('#<?= $model->formName() ?>-is_checked').on('click', function () {
                if ($(this).is(':checked')) {
                    $('#input-field').show();
                } else {
                    $('#input-field').hide();
                }
            });
        });
    </script>

上面的代码中,我们首先在表单中添加了一个复选框来触发显示/隐藏输入框的操作。我们还在表单中添加了一个输入字段,它被包装在一个带有 ID 的 div 元素中。该 div 元素的初始 CSS 样式设置为“display: none”,以使其在页面加载时处于隐藏状态。JavaScript 代码使用 jQuery 框架监听了复选框的点击事件,并可以通过 jQuery 来控制输入字段的显示/隐藏。

总结

通过上述代码示例,我们可以看到如何在 Yii2 中使用 JavaScript 来显示或隐藏输入标签。我们还可以扩展此代码示例以实现更多复杂的功能,例如控制多个输入字段的显示/隐藏或根据其他表单数据动态更新输入字段。