How to usethe onclick event in Javascript

Approach 2: Using the window.addEventListener and window.onload functions

We are creating a function checkAll in which we are setting checked true for all the checkboxes using the for loop.
When a button is clicked to check all the checkboxes the onclick event will occur and checkAll function will be called.
Another button is present which is the reset button by clicking that button it will reset the settings and it will set the checked property as a false value.

Example: In this example, we have implemented the above-explained approach.

HTML

<!DOCTYPE html>
<html lang="en">
 
<head>
    <title>
        How to Check/Uncheck the
        checkbox using JavaScript ?
    </title>
</head>
 
<body>
    <h1 style="color:green;">
        w3wiki
    </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:

How to Check/Uncheck the checkbox using JavaScript ?

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 two ways:

Table of Content

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

Tags:

#JavaScript-Questions #JavaScript #Web Technologies

Approach 2: Using the window.addEventListener and window.onload functions

How to usethe onclick event in Javascript

HTML

How to Check/Uncheck the checkbox using JavaScript ?

Similar Reads