How to Check/Uncheck the checkbox using JavaScript ?

0 0 1 minute read

In this article, we will learn how to check/uncheck the checkbox using JavaScript. We can check/uncheck the checkbox in two ways:

Using the Reset Button
Using Separate Button

Approach 1: Using the Reset Button

Create a JavaScript function.
Use window.addEventListener that allows adding event listeners on any HTML document or other objects that support events.
Use window.onload() function to perform the task as soon as the page refresh or loading.

Example: In this example, we will use the JavaScript function.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>
        How to Check/Uncheck the 
        checkbox using JavaScript ?
    </title>
</head>
 
<body>
    <h1 style="color:green;">
        zambiatek
    </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;
            }
        }
         
        window.onload = function () {
            window.addEventListener('load', checkAll, false);
        }
    </script>
</body>
 
</html>

Output:

How to Check/Uncheck the checkbox using JavaScript ?

Approach 2: Using Separate Button

Create two JavaScript functions
Use window.addEventListener and window.onload functions

Example: In this example, we will use window.addEventListener and window.onload functions.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>
        How to Check/Uncheck the
        checkbox using JavaScript ?
    </title>
</head>
 
<body>
    <h1 style="color:green;">
        zambiatek
    </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;
            }
        }
 
        window.onload = function () {
            window.addEventListener('load', checkAll, false);
        }
    </script>
</body>
 
</html>