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: