In this blog post, you'll discover how to check a checkbox's state in JavaScript, whether it's selected (checked) or not selected (unchecked). Master the art of detecting their state (checked or unchecked) with this easy-to-follow guide. Boost your web development skills and create interactive forms.
You can achieve this easily with JavaScript using the checked property.
Check If a Checkbox is Selected or Not Using JavaScript.
First, we'll create the design elements, including the checkbox and text. See the HTML and CSS code below.
HTML
<!DOCTYPE html>
<html lang="en">
<!-- maketechstuff.com -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Check if checkbox is checked or not. | Maketechstuff.com</title>
<link rel="stylesheet" href="index.css">
</head>
<body>
<div class="container">
<h2 style="text-decoration: underline;">Maketechstuff.com</h2>
<label><input type="checkbox" class="checkbox">
<p>Checkbox</p>
</label>
<!-- To show the output of checkbox states wheather its selected or not selected. -->
<div class="text"></div>
</div>
</body>
</html>
CSS
* {
padding: 0px;
margin: 0px;
font-family: sans-serif;
}
body {
width: 100%;
height: 100vh;
background-color: #000;
position: relative;
}
.container {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 300px;
padding: 20px 30px;
background-color: #fff;
border-radius: 10px;
text-align: center;
}
label {
font-size: 25px;
display: flex;
padding: 10px;
margin: 25px 0px;
border-radius: 10px;
cursor: pointer;
}
label:active {
background-color: #f1f1f1;
}
p {
margin-left: 10px;
}
.text {
font-size: 25px;
font-weight: bold;
color: blue;
}
Output:
Let's add JavaScript to check whether a checkbox is selected or not.
To achieve this, we'll use the onchange event of JavaScript on the checkbox. This means that whenever the state of the checkbox changes (but we don't know in which state it's been currently on), a function will be executed.
This function will determine whether the checkbox is currently selected or not by checking its checked property. And according to the state of the checkbox we’ll display the text in the HTML element (that checkbox is selected or checkbox is not selected).
We’ll also run this function on page load. So that when the checkbox is made selected by default, then too the state will be checked.
Take a look at the code below:
JavaScript
let checkbox = document.querySelector(".checkbox");
let text = document.querySelector(".text");
checkbox.addEventListener("change", check_checkbox_state);
// Call the function on page load too.
check_checkbox_state();
function check_checkbox_state() {
if (checkbox.checked) {
text.innerHTML = "checkbox is selected";
} else {
text.innerHTML = "checkbox is not selected";
}
}
Output:
This is how you can easily detect the checkbox state (selected or unselected) using simple JavaScript code. Feel free to leave any questions or suggestions in the comments below.
You may like:
- How to create a custom checkbox using HTML and CSS.
- How to create a toggle button using HTML and CSS.
- How to create a select and unselect all function in JavaScript.
- How to create a right check mark animation.
- Show and hide the password based on checkbox states.
- Show and hide sidebar based on checkbox states.
- Make one input field value same as other when checkbox is checked.
- Check if string contains special characters using JavaScript.
Share your thoughts.