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;">        neveropen    </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;">        neveropen    </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> |
Output:Â
How to Check/Uncheck the checkbox using JavaScript ?
