How to Check/Uncheck the checkbox using JavaScript ?

Last Updated : 21 Oct, 2024

To check and uncheck the checkbox using JavaScript we can use the onclick event to toggle the checkbox value. We can also check or uncheck all the checkboxes on loading the webpage using JavaScript onload function.

In this article, we will learn how to check/uncheck the checkbox using JavaScript. As we know checkboxes are used to choose more than one value at a time so we can create a function to check more than one checkbox at a time.

We can check/uncheck the checkbox in following 2 ways:

Table of Content

Using the onclick event
Using the window.addEventListener and window.onload functions

Approach 1: Using the onclick event

To check and uncheck using the onclick event we define a function named checkAll that targets all the checkboxes using class. Call this function when the onclick event is triggered as shown in the below example.

Example: This example demonstrates checking all the checkboxes with onclick event using a function to target all the checkbox inputs using class.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <title>
        How to Check/Uncheck the
        checkbox using JavaScript ?
    </title>
</head>

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

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


    </script>
</body>

</html>

Output:

gfg

Approach 2: Using window.onload function

To check and uncheck using the window.onload we define a function named checkAll that targets all the checkboxes using class. The checkAll function will be called when the contenet start loading on the webpage.

Example: This example demonstrates using JavaScript onload to check all the checkboxes on the first loading of the web page.

HTML

<!DOCTYPE html>
<html lang="en">

<head>
    <title>
        How to Check/Uncheck the
        checkbox using JavaScript ?
    </title>
</head>

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

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

        // To check all the checkboxes when the webpage loads      
        window.onload = function () {
			checkAll();
        }
    </script>
</body>

</html>