How to Check/Uncheck the checkbox using JavaScript ?
Last Updated :
12 Jul, 2025
To check and uncheck the checkbox using JavaScript we can use the onclick event to toggle the checkbox value. We can also check or uncheck all the checkboxes on loading the webpage using JavaScript onload function.
In this article, we will learn how to check/uncheck the checkbox using JavaScript. As we know checkboxes are used to choose more than one value at a time so we can create a function to check more than one checkbox at a time.
We can check/uncheck the checkbox in following 2 ways:
Approach 1: Using the onclick event
To check and uncheck using the onclick event we define a function named checkAll that targets all the checkboxes using class. Call this function when the onclick event is triggered as shown in the below example.
Example: This example demonstrates checking all the checkboxes with onclick event using a function to target all the checkbox inputs using class.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>
How to Check/Uncheck the
checkbox using JavaScript ?
</title>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h2>Check/Uncheck the checkbox using JavaScript</h2>
<form>
<div>
<input type="button" onclick="checkAll()" value="CHECK ALL">
<input type="reset" value="UNCHECK ALL">
</div>
<div>
<label>
<input type="checkbox" class="check3"> First
</label>
</div>
<div>
<label>
<input type="checkbox" class="check3"> Second
</label>
</div>
<div>
<label>
<input type="checkbox" class="check3"> Third
</label>
</div>
</form>
<script>
// Create function of check/uncheck box
function checkAll() {
let inputs = document.querySelectorAll('.check3');
for (let i = 0; i < inputs.length; i++) {
inputs[i].checked = true;
}
}
</script>
</body>
</html>
Output:
Approach 2: Using window.onload function
To check and uncheck using the window.onload we define a function named checkAll that targets all the checkboxes using class. The checkAll function will be called when the contenet start loading on the webpage.
Example: This example demonstrates using JavaScript onload to check all the checkboxes on the first loading of the web page.
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<title>
How to Check/Uncheck the
checkbox using JavaScript ?
</title>
</head>
<body>
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h2>Check/Uncheck the checkbox using JavaScript</h2>
<form>
<div>
<input type="button"
onclick="checkAll()"
value="Check All">
<input type="button"
onclick="uncheckAll()"
value="Uncheck All">
</div>
<input type="checkbox" class="check2">
<label>First</label>
<input type="checkbox" class="check2">
<label>Second</label>
<input type="checkbox" class="check2">
<label>Third</label>
</form>
<script>
// Create checkall function
function checkAll() {
let inputs = document.querySelectorAll('.check2');
for (let i = 0; i < inputs.length; i++) {
inputs[i].checked = true;
}
}
// Create uncheckall function
function uncheckAll() {
let inputs = document.querySelectorAll('.check2');
for (let i = 0; i < inputs.length; i++) {
inputs[i].checked = false;
}
}
// To check all the checkboxes when the webpage loads
window.onload = function () {
checkAll();
}
</script>
</body>
</html>
Output:
How to Check/Uncheck the checkbox using JavaScript ?
Explore
JavaScript Basics
Array & String
Function & Object
OOP
Asynchronous JavaScript
Exception Handling
DOM
Advanced Topics