Mastering Yii2: Implementing Javascript Functions such as onchange() in a View

Question

Mastering Yii2: Implementing Javascript Functions such as onchange() in a View

One of the elements in my project is a checkbox:

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

In addition to that, I also have a span tag:

<span>I enjoy all things chocolate.</span>

I am looking to incorporate either the onchange JavaScript function or jQuery (as I am fairly new to using jQuery) to display the span when the user checks the checkbox.

Initially, I need to retrieve the value of chocolate. However, it is not JavaScript code, it is PHP code:

<?= Html::checkbox('chocolate', false) ?>

.

javascript php html yii2 onchange

Answer 1

Answer №1

To enhance the functionality, I recommend assigning a class to your span element. Then, you can implement a change event listener for your checkbox to switch the display style between none and block.

To incorporate the script into your view, simply insert it at the end of your view within 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>

Answer 2

To enhance the functionality, I recommend assigning a class to your span element. Then, you can implement a change event listener for your checkbox to switch the display style between none and block.

To incorporate the script into your view, simply insert it at the end of your view within 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>

Mastering Yii2: Implementing Javascript Functions such as onchange() in a View

Answer №1

Similar questions

How can the object currently being dragged be chosen using JQueryUI Draggable?

Tips for implementing this code for effective DAO and CRUD operations

Using SetInterval function in conjunction with jQuery's .each() method

On a medium-sized screen, a collapsible button unexpectedly appears amidst the various links

Building a custom dialog box using Angular Material with HTML and CSS

Ways to automatically divide lists into various div elements

Utilize the provided parameter within a JavaScript function

Request the generic password prior to revealing the concealed div

Using jQuery to create clickable URLs within a rollover div

Using SQL to combine several IDs

Showing content in a way that spaces out below the text

Performing subtraction operation on a selected floating-point value from a database using PHP

Utilizing the arr.push() method to replace an existing value within an array with a new object, rather than simply adding a new

Identifier for md-radio-group

Splitting a foreach loop isn't functioning correctly

Utilizing arrays in the label field of Chart.js

Is there a way to continue a failed fetch request?

Vue is struggling to load the component files

What new post status can WordPress generate?

No data appears to be populating the Javascript data list, yet no errors are being displayed in