javascript - Yii2:如何在 View 中使用JavaScript函数，例如onchange()

我有一个复选框：

<div class="checkbox">
    <label>
        <?= Html::checkbox('chocolate', false) ?>
        Chocolate
    </label>
</div>

我也有一个span标签：

<span>I like all chocolates.</span>

我想使用onchange JavaScript函数或jQuery（我是jQuery的初学者）来显示跨度（如果用户选中了复选框）。

首先，我需要获取chocolate的值。但这不是JavaScript代码，而是PHP代码：<?= Html::checkbox('chocolate', false) ?>。

最佳答案

我建议为您的跨度添加一个类。之后，您可以将更改事件处理程序添加到您的复选框，以切换显示样式：从无变为块。

为了将脚本添加到视图中，可以在脚本标签的视图底部添加脚本本身：

 <script>
    document.querySelector('.checkbox [type="checkbox"][name="chocolate"]').addEventListener('change', function(e) {
        console.log(this.checked);
        document.querySelector('span.chocoLike').style.display = (this.checked) ? 'block' : 'none';
    })
</script>

document.addEventListener("DOMContentLoaded", function(e) {
    document.querySelector('.checkbox [type="checkbox"][name="chocolate"]').addEventListener('change', function(e) {
        console.log(this.checked);
        document.querySelector('span.chocoLike').style.display = (this.checked) ? 'block' : 'none';
    })
})

.chocoLike {
    display: none;
}

<div class="checkbox">
    <label>
        <input type="checkbox" name="chocolate">
        Chocolate
    </label>
</div>
<span class="chocoLike">I like all chocolates.</span>