In this article, we will learn how to check/uncheck the checkbox using JavaScript. We can check/uncheck the checkbox in two ways:
- Using the Reset Button
- Using Separate Button
Approach 1: Using the Reset Button
- Create a JavaScript function.
- Use window.addEventListener that allows adding event listeners on any HTML document or other objects that support events.
- Use window.onload() function to perform the task as soon as the page refresh or loading.
Example: In this example, we will use the JavaScript function.
HTML
<!DOCTYPE html><html lang="en"><head> <title> How to Check/Uncheck the checkbox using JavaScript ? </title></head><body> <h1 style="color:green;"> neveropen </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; } } window.onload = function () { window.addEventListener('load', checkAll, false); } </script></body></html> |
Output:
How to Check/Uncheck the checkbox using JavaScript ?
Approach 2: Using Separate Button
- Create two JavaScript functions
- Use window.addEventListener and window.onload functions
Example: In this example, we will use window.addEventListener and window.onload functions.
HTML
<!DOCTYPE html><html lang="en"><head> <title> How to Check/Uncheck the checkbox using JavaScript ? </title></head><body> <h1 style="color:green;"> neveropen </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 ?
