How to Check/Uncheck the checkbox using JavaScript ?

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

Approach 1: Using the 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.

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

HTML

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

Output:

How to Check/Uncheck the checkbox using JavaScript ?

Approach 2: Using Separate Button

• Create two javascript functions.
• Use window.addEventListener and window.onload function.

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

HTML

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

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

Output:

How to Check/Uncheck the checkbox using JavaScript ?