JavaScript Checkbox OnChange
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Anjali
In this article we will show you the solution of JavaScript checkbox onchange, when a checkbox's nation is modified by the consumer in JavaScript, the onchange event allows you to run code. When a user clicks or selects/deselects a checkbox, the onchange occasion is released.
When you desire to take action based at the checkbox's current status, this event can be helpful.
In your HTML code, you can give the checkbox element's onchange attribute a JavaScript function to use the checkbox onchange event.
The designated function is called when the checkbox status changes, and you can add your own unique logic there to deal with the change.
We'll talk about the javascript checkbox onchange concept now.
Step By Step Guide On Javascript Checkbox OnChange :-
<!DOCTYPE html>
<html>
<head>
<title>Checkbox Onchange Example</title>
</head>
<body>
<h1>Checkbox Onchange Example</h1>
<input type="checkbox" id="myCheckbox" onchange="handleCheckboxChange()">
<script>
function handleCheckboxChange() {
var checkbox = document.getElementById("myCheckbox");
if (checkbox.checked) {
console.log("Checkbox is checked");
// Perform actions when the checkbox is checked
} else {
console.log("Checkbox is unchecked");
// Perform actions when the checkbox is unchecked
}
}
</script>
</body>
</html>
- We have a <h1> heading with the words "Checkbox Onchange Example" in the HTML section.
- An <input> element with the type attribute set to "checkbox" and the identification attribute set to "myCheckbox" is present under the heading.
- The checkbox now has a onchange characteristic, which is ready to handleCheckboxChange().
- Then we define the handleCheckboxChange() function in the JavaScript.
- This function is invoked every time the checkbox's state changes.
- Using document.getElementById("myCheckbox") within the method, we first grab the checkbox element and supply it to the checkbox variable.
- Next, we check the value of the checkbox.checked with the help of an if statement.
- The checkbox is chosen if it is true.
- If so, we save the data "Checkbox is checked" to the console.
- Then you can update the console.Log statements with the expected actions to be completed while the checkbox is checked.
- Likewise, if checkbox.Checked returns false, the checkbox isn't selected. The "Checkbox is unchecked" message is logged to the console.
- Once more, you may adjust the code in the else block to perform specific tasks whilst the checkbox is unchecked.
- Every time the checkbox's popularity changes, we may also name the handleCheckboxChange() function by leveraging the onchange occasion on the checkbox.
- Then save it as an HTML file and open it in an internet browser to see the code in motion.
- The checkbox onchange event's functionality is established while the corresponding messages are logged to the browser's console when the checkbox is checked or unchecked.
Conclusion :-
As a result, we were able to understand the javascript checkbox onchange concept.
We also discovered that the JavaScript checkbox onchange idea enables you to take actions based on a checkbox's status when the user changes it.
You can manage the change event and carry out personalised logic by giving the checkbox element's onchange property a JavaScript function.
I hope this article on JavaScript checkbox onchange helps you and the steps and method mentioned above are easy to follow and implement.
About Anjali
