Yii2: How to use JavaScript functions like onchange() in a view

Question

I have a a checkbox:

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

Also I have a span tag:

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

I want to use the onchange JavaScript function or jQuery (I am beginner using jQuery) to show the span if the user check the checkbox.

First I need to get the value of chocolate. But it is not JavaScript code, it is PHP code: <?= Html::checkbox('chocolate', false) ?>.

gaetanoM · Accepted Answer · 2017-09-11 17:54:44Z

I suggest to add a class to your span. After, you can add a change event handler to your checkbox in order to toggle the display style: from none to block.

In order to add the script to your view, you may add the script itself at the bottom of your view in the script tags:

 <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>

Collectives™ on Stack Overflow

Yii2: How to use JavaScript functions like onchange() in a view

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related