Skip to content
Related Articles
Open in App
Not now

Related Articles

How to Check/Uncheck the checkbox using JavaScript ?

Improve Article
Save Article
  • Difficulty Level : Hard
  • Last Updated : 23 Jan, 2023
Improve Article
Save Article

Approach 1: Using Reset Button

  1. Create a javascript function.
  2. Use window.addEventListener: It allows adding event listeners on any HTML document or other objects that support events.
  3. Use window.onload function: It is used to perform the task as soon as the page refresh or loading.

Example: 

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 ?

How to Check/Uncheck the checkbox using JavaScript ?

Approach 2: Using Separate Button

  1. Create two javascript function.
  2. Use window.addEventListener and window.onload function.

Example: 

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 ?

How to Check/Uncheck the checkbox using JavaScript ?


My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!