toggle

16 March, 2023

Contributors

Milsaware

@milsaware

About

The toggle event is fired when the state of an element changes from checked to unchecked or vice versa. This event is commonly associated with checkbox and radio button elements, but it can also be used with other form elements and custom elements that have a checked state.

The toggle event is similar to the change event, which is also fired when the state of an input element changes. However, the change event is fired after the user has finished interacting with the element, such as when they release the mouse button or press the Enter key. In contrast, the toggle event is fired immediately when the user clicks the checkbox or radio button element, before the element's checked state is updated.

The toggle event is a useful event to handle when you want to perform an action immediately after the user clicks on a checkbox or radio button element, before the checked state is updated. For example, you might want to show or hide a section of a form based on whether a checkbox is checked or not.

Event listener

Here's an example of adding an event listener for the toggle event using addEventListener():

HTML

<input type="checkbox" id="my-checkbox">

JavaScript

const checkbox = document.getElementById("my-checkbox");

checkbox.addEventListener("toggle", function(event) {
    if (event.target.checked) {
        console.log("Checkbox is checked");
    } else {
        console.log("Checkbox is unchecked");
    }
});

Here, we're adding an event listener to a checkbox element with an ID of my-checkbox. When the toggle event is fired, the event listener function is called. We're using the event.target.checked property to determine whether the checkbox is checked or unchecked, and logging a message to the console accordingly.

Property

Here's an example of using the ontoggle property to assign a function to handle the toggle event:

const checkbox = document.getElementById("my-checkbox");

checkbox.ontoggle = function(event) {
    if (event.target.checked) {
        console.log("Checkbox is checked");
    } else {
        console.log("Checkbox is unchecked");
    }
};

Here, we're assigning a function to the ontoggle property of a checkbox element with an ID of my-checkbox. When the toggle event is fired, the function is called with the event object as its argument. We're using the event.target.checked property to determine whether the checkbox is checked or unchecked, and logging a message to the console accordingly.

Inline

Here's an example of using the ontoggle attribute to add an inline function to handle the toggle event:

HTML

<input type="checkbox" id="my-checkbox" ontoggle="toggleCheckbox(event)">

Here, we're adding an ontoggle attribute to a checkbox element with an ID of my-checkbox. The value of the attribute is a function called toggleCheckbox, which will be called when the toggle event is fired. The event object will be passed as an argument to the function.

Note that using the ontoggle attribute is not recommended as it can only handle one function at a time, and any previously assigned function will be overwritten. It's better to use addEventListener() to add event listeners to elements.

Programmatic trigger

You can use the toggle() method to programmatically toggle the state of a checkbox or a radio button and trigger the toggle event:

const checkbox = document.getElementById('my-checkbox');

// programmatically toggle the checkbox
checkbox.toggle();

// add an event listener for the toggle event
checkbox.addEventListener('toggle', function() {
    if (checkbox.checked) {
        console.log('Checkbox is now checked');
    } else {
        console.log('Checkbox is now unchecked');
    }
});

Here, we're getting a reference to a checkbox element with an ID of my-checkbox. Then we're calling the toggle() method on the checkbox element to programmatically toggle its state. After toggling the checkbox, we're performing some action based on the new state of the checkbox.

javascript