How to Check/Uncheck the checkbox using JavaScript ?

Approach 1: Using Reset Button

  1. Create a javascript function.
  2. Use window.addEventListener: It allows adding event listeners on any HTML document or other objects that support events.
  3. Use window.onload function: It is used to perform the task as soon as the page refresh or loading.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<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>

chevron_right


Output:


Approach 2: Using Separate Button



  1. Create two javascript function.
  2. Use window.addEventListener and window.onload function.

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<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>

chevron_right


Output:




My Personal Notes arrow_drop_up

Check out this Author's contributed articles.

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.