How to Check/Uncheck the checkbox using JavaScript ?
Approach 1: Using Reset Button
- Create a javascript function.
- Use window.addEventListener: It allows adding event listeners on any HTML document or other objects that support events.
- Use window.onload function: It is used to perform the task as soon as the page refresh or loading.
Example:
<html> <head> <title>Check/Uncheck the checkbox using JavaScript</title> </head> <body> <center> <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> </center> </body> <script type="text/javascript"> //create function of check/uncheck box function checkAll() { var inputs = document.querySelectorAll('.check3'); for (var i = 0; i < inputs.length; i++) { inputs[i].checked = true; } } window.onload = function() { window.addEventListener('load', checkAll, false); } </script> </html> |
Output:
Approach 2: Using Separate Button
- Create two javascript function.
- Use window.addEventListener and window.onload function.
Example:
<html> <head> <title>Check/Uncheck the checkbox using JavaScript</title> </head> <body> <center> <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> <label> <input type="checkbox" class="check2"> First </label> <label> <input type="checkbox" class="check2"> Second </label> <label> <input type="checkbox" class="check2"> Third </label> </form> </center> </body> <script type="text/javascript"> //create checkall function function checkAll() { var inputs = document.querySelectorAll('.check2'); for (var i = 0; i < inputs.length; i++) { inputs[i].checked = true; } } //create uncheckall function function uncheckAll() { var inputs = document.querySelectorAll('.check2'); for (var i = 0; i < inputs.length; i++) { inputs[i].checked = false; } } window.onload = function() { window.addEventListener('load', checkAll, false); } </script> </html> |
Output:
.png)