In this article, we will discuss how to check and uncheck checkboxes using JavaScript.
Explore different methods, including using the checked property, the click method, and jQuery.
So, let’s get started, to learn how to easily check and uncheck checkboxes in JavaScript with our comprehensive guide.
What is checkbox?
The checkbox is an HTML input element that enables the user to choose one option from a range of possibilities.
The checkbox can be created using the input element with the checkbox type attribute in JavaScript.
It is recommended to associate a label with the checkbox for better usability and accessibility. By doing so, clicking the label will also toggle the checkbox’s checked or unchecked state.
A checkbox has two possible states: ☑ checked and ☐ unchecked.
JavaScript can be used to check if a checkbox is selected, retrieve the values of selected checkboxes, and select or deselect all checkboxes.
To obtain the state of a checkbox, you can select the checkbox element using a DOM method like getElementById() or querySelector().
Then, you can access the checked property of the checkbox element. If the checked property is true, the checkbox is checked; otherwise, it is not.
Solutions on how to check and uncheck checkbox using JavaScript
Here are the following solutions on how to check and uncheck checkbox in JavaScript along with example codes and output.
1. Use checked property
To manipulate the checked status of a checkbox using JavaScript, this solution entails directly modifying the checked property of the checkbox element.
By setting it to true or false, the checkbox can be checked or unchecked. This approach offers a simple and direct method to manipulate the checkbox’s checked status.
Here’s an example:
<!DOCTYPE html>
<html>
<head>
<title>Checkbox Example</title>
<style>
body {
text-align: center;
margin-top: 250px;
}
</style>
</head>
<body>
<input type="checkbox" id="checkbox"> Try to Check me!
<br><br>
<button onclick="check()">Check</button>
<button onclick="uncheck()">Uncheck</button>
<script>
function check() {
document.getElementById("checkbox").checked = true;
}
function uncheck() {
document.getElementById("checkbox").checked = false;
}
</script>
</body>
</html>
Output:
In this example, we modify some code to add some checklist:
<!DOCTYPE html>
<html>
<head>
<title>Checkbox Example</title>
<style>
body {
text-align: center;
margin-top: 150px;
}
ul {
list-style: none;
padding: 0;
}
</style>
</head>
<body>
<h2>Things to do:</h2>
<ul>
<li><input type="checkbox" id="eat"> Eat</li>
<li><input type="checkbox" id="sleep"> Sleep</li>
<li><input type="checkbox" id="work"> Work</li>
</ul>
<br><br>
<button onclick="checkAll()">Check All</button>
<button onclick="uncheckAll()">Uncheck All</button>
<script>
function checkAll() {
document.querySelectorAll('input[type="checkbox"]').forEach(function(el) {
el.checked = true;
});
}
function uncheckAll() {
document.querySelectorAll('input[type="checkbox"]').forEach(function(el) {
el.checked = false;
});
}
</script>
</body>
</html>
Output:
2. Use click method
Another simple method to manipulate the checked status of a checkbox using JavaScript is by invoking the click method of the checkbox element.
This solution allows you to toggle the checkbox’s checked status with just a single function call. It can be particularly useful when you need to quickly switch the checkbox between checked and unchecked states.
Here’s an example:
<!DOCTYPE html>
<html>
<head>
<title>Checkbox Example</title>
</head>
<body>
<style>
body {
text-align: center;
margin-top: 250px;
}
</style>
<input type="checkbox" id="checkbox"> Check me!
<br><br>
<button onclick="toggle()">Toggle</button>
<script>
function toggle() {
document.getElementById("checkbox").click();
}
</script>
</body>
</html>
Output:
3. Use jQuery
This solution involves using the prop or attr methods provided by the jQuery library to check or uncheck a checkbox. This can be a convenient way to manipulate the checked status of a checkbox if you’re already using jQuery in your project.
Here’s an example:
<title>Checkbox Example</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
<style>
body {
text-align: center;
margin-top: 250px;
}
</style>
<input type="checkbox" id="checkbox"> Check me!
<br><br>
<button onclick="check()">Check</button>
<button onclick="uncheck()">Uncheck</button>
<script>
function check() {
$("#checkbox").prop("checked", true);
}
function uncheck() {
$("#checkbox").prop("checked", false);
}
</script>
</body>
Output
Conclusion
In conclusion, this article provides several approaches for checking and unchecking checkboxes using JavaScript.
The first approach demonstrated how to manipulate the checked property directly, setting it to true or false to check or uncheck the checkbox.
The second approach involved using the click method to toggle the checkbox’s checked status with a single function call.
Additionally, the article mentioned the use of jQuery’s prop or attr methods as an alternative for manipulating checkboxes if jQuery is already being used in the project.
Using these solutions offers flexibility and convenience for working with checkboxes in JavaScript.
We are hoping that this article provides you with enough information that helps you understand the JavaScript uncheck checkbox.
You can also check out the following article:
Thank you for reading itsourcecoders 😊.
