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 two ways:
Table of Content
Approach 1: Using the onclick event
- We are creating a function checkAll in which we are setting checked true for all the checkboxes using the for loop.
- When a button is clicked to check all the checkboxes the onclick event will occur and checkAll function will be called.
- Another button is present which is the reset button by clicking that button it will reset the settings and it will set the checked property as a false value.
Example: In this example, we have implemented the above-explained approach.
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 the window.addEventListener and window.onload functions
- In this approach, we are creating two functions one for check the checkboxes and another one for uncheck the checkboxes.
- Using window.addEventListener and window.onload functions to set unchecked the checkboxes by default.
- After that, we have created two buttons for check and uncheck the checkboxes according to our need.
- Any of the button get clicked the respective function will be called.
Example: In this example, we have implemented the above-explained approach.
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;
}
}
window.onload = function () {
window.addEventListener('load', checkAll, false);
}
</script>
</body>
</html>
|
Output:
How to Check/Uncheck the checkbox using JavaScript ?