How to Check/Uncheck the checkbox using JavaScript ? - GeeksforGeeks

27 Sep, 2019
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.
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.
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:
JavaScript-Misc
Picked
JavaScript
Web Technologies
Web technologies Questions
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Remove elements from a JavaScript Array
Convert a string to an integer in JavaScript
Difference between var, let and const keywords in JavaScript
Differences between Functional Components and Class Components in React
Difference Between PUT and PATCH Request
Remove elements from a JavaScript Array
Installation of Node.js on Linux
Convert a string to an integer in JavaScript
How to fetch data from an API in ReactJS ?
How to insert spaces/tabs in text using HTML/CSS?