The Checkbox Onclick Events in JavaScript

The checkbox is an HTML input element that permits the user to choose one of several options. As with HTML forms, there is a check box for gender, male or female. Or sometimes, the terms and conditions must be approved before submitting the form. The “onclick” event will be attached to the checkbox, and It will be triggered or executed when a checkbox is clicked.

This article will demonstrate the checkbox onclick event in JavaScript.

The Checkbox Onclick Events in JavaScript

The “onclick” is an event that will be triggered when the user checks the checkbox. The onclick event will be attached with the checkbox by:

• Using the onclick attribute within the HTML tag
• Applying a function on the onclick attribute of an HTML element in JavaScript
• Explicitly adding an event listener on the “click” event

Let’s use all these one by one.

Example 1: Checkbox Onclick Event Using the onclick Attribute Within the HTML Tag
Create a checkbox in an HTML file with the id “agree” and attach an “onclick” event with it which will execute the function checkClickFunc() written in the JavaScript part:

Use the below lines of code in a JavaScript file:

In the above code,

• Create the function checkClickFunc() which is to be executed upon clicking the checkbox.
• Using the “getElementById()” method, retrieve the checkbox by its id, “agree”.
• Check the checkbox’s status by using the “checked” attribute.
• If it’s “true”, show an alert message “Checkbox is clicked”.

Output

Example 2: Checkbox Onclick Event by Applying a Function on the onclick Attribute of an HTML Element in JavaScript
In this example, JavaScript will be used to give a value to the onclick attribute of the HTML element rather than in the HTML tag.

Create a checkbox and assign an id to it that will later be accessed in JavaScript:

In the following step, the checkbox will be accessed using its id “agree” and an “onclick” attribute will be attached to it. Upon the checkbox click, the defined function will be executed, and an alert message will be shown:

The corresponding output will be:

Example 3: Checkbox Onclick Event by Explicitly adding Event Listener on “click” Event
Here, the checkbox onclick event will be set using the JavaScript “addEventListener()” method:

In the JavaScript file, use the given code:

In the above code snippet,

• First, fetch the checkbox using its id and then attach an “addEventListener()” method by passing a “click” event and a function “checkClickFunc” which will be called on the checkbox click.
• Define a function “checkClickFunc()”, which will be triggered while clicking the checkbox and shows an alert message:

Output

Conclusion

The Checkbox onClick Events are events performed when a checkbox is marked as “checked”. These events are not applied by default on a check box element of the HTML document. Therefore, the user must manually add the events to perform specific functionality. There are three different ways of adding an “onclick” event and performing an action upon that event with the help of JavaScript. This article explains these three methods along with examples.