JavaScript Checkbox Checked Event
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Anjali
In this article we will show you the solution of JavaScript checkbox checked event, now at first, we have to know about the checked property.
.checked property: The checkbox is selected if the checked property is set to true. Additionally, the checkbox remains intact if the property is set to false.
The input checkbox's checked property can also be set.
Now in the example below we are going use the javascript addEventListener tag to set or remove the check in the checkbox.
Step By Step Guide On JavaScript Checkbox Checked Event :-
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> JavaScript checkbox checked event </title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
<style>
h1 {
color : rgb(95, 194, 95) ;
font-size: 25px;
font-weight : bolder ;
}
</style>
</head>
<body>
<center>
<h1> TALKERSCODE </h1>
<h3> JavaScript checkbox checked event </h3>
</center>
<form action="">
First Name: <input type="text"> <br>
Last Name: <input type="text"> <br>
password: <input type="password"> <br>
<input type="checkbox" id="remember">
<label for="remember">Remember my choice</label>
<button type="submit" value="submit" id="submit" disabled> SUBMIT </button>
</form>
<script>
var remember = document.getElementById("remember") ;
remember.addEventListener('change',function() {
var submit = document.getElementById("submit") ;
if(remember.checked) {
submit.removeAttribute("disabled") ;
} else {
submit.setAttribute("disabled", "disabled") ;
}
})
</script>
</body>
</html>
- To write HTML code <! DOCTYPE html> to mention which version of the HTML file is written in.
- Then we have to write the <html> tag used to define the root of an HTML document. And also write the ending tag </html>.
- <head> tag used here to use to contain the metadata about the HTML file and end it with </head> tag
- Then <title> tag is used to set the title of the HTML document and end it with </title> tag.
- In order to style the HTML page, we'll utilize an external CSS file
- using <style> tag to add CSS
- <h1> tag used to add a heading close it with </h1> tag
- At first, we have to create a form using the <form> tag and close it with the </form>
- Creating some <input> with the type of text. And also created a <input> with the type of checkbox with the id of Remember
- A <button> is created with the id of submit and the attribute of disabled to keep the submit button disabled initially.
- Create a <Script> tag to write JavaScript within it.
- Now use document.getElementById() with a variable remember for the checkbox
- Using addEventListener() tag first.
- Access the button with the variable submit with document.getElementById().
- Now if the checkbox is checked then remove the attribute disabled to keep the submit button enable
- Else statement for setting the attribute to disabled.
Conclusion :-
At last, here in conclusion, we can say that with this article’s help, we know how to checkbox-checked events in JavaScript.
I hope this article on JavaScript checkbox checked event helps you and the steps and method mentioned above are easy to follow and implement.
About Anjali
