How to Check/Uncheck the checkbox using JavaScript ? Last Updated : 21 Oct, 2024 Summarize Comments Improve Suggest changes Share Like Article Like Report To check and uncheck the checkbox using JavaScript we can use the onclick event to toggle the checkbox value. We can also check or uncheck all the checkboxes on loading the webpage using JavaScript onload function.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 following 2 ways:Table of ContentUsing the onclick eventUsing the window.addEventListener and window.onload functionsApproach 1: Using the onclick eventTo check and uncheck using the onclick event we define a function named checkAll that targets all the checkboxes using class. Call this function when the onclick event is triggered as shown in the below example.Example: This example demonstrates checking all the checkboxes with onclick event using a function to target all the checkbox inputs using class. HTML <!DOCTYPE html> <html lang="en"> <head> <title> How to Check/Uncheck the checkbox using JavaScript ? </title> </head> <body> <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> // 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:Approach 2: Using window.onload functionTo check and uncheck using the window.onload we define a function named checkAll that targets all the checkboxes using class. The checkAll function will be called when the contenet start loading on the webpage.Example: This example demonstrates using JavaScript onload to check all the checkboxes on the first loading of the web page. HTML <!DOCTYPE html> <html lang="en"> <head> <title> How to Check/Uncheck the checkbox using JavaScript ? </title> </head> <body> <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> <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; } } // To check all the checkboxes when the webpage loads window.onload = function () { checkAll(); } </script> </body> </html> Output: How to Check/Uncheck the checkbox using JavaScript ? Comment More infoAdvertise with us Next Article How to unchecked a radio button using JavaScript/jQuery? K keshabkumarmishra Follow Improve Article Tags : JavaScript Web Technologies JavaScript-Questions Similar Reads How to use Checkbox inside Select Option using JavaScript ? In this article, we are going to learn how to use Checkbox inside Select Option using JavaScript. ApproachThe HTML contains a styled dropdown (selectBox) and hidden checkboxes (checkBoxes).CSS styles enhance the appearance, styling the dropdown and checkboxes.The function showCheckboxes() toggles ch 2 min read How to unchecked a radio button using JavaScript/jQuery? In order to uncheck a radio button, there are a lot of methods available, but we are going to see the most preferred methods. In HTML, we can create radio buttons using the same name attribute, and by setting a unique value for each radio button within the group. Only one radio button within the gro 2 min read How to change the checkbox value using jQuery ? The Checkboxes are used to let a user select one or more options for a limited number of choices. The :checkbox selector selects input elements with type checkbox.Syntax: $('#textboxID').val($("#checkboxID").is(':checked')); In the above syntax, basically the return value of the checked or unchecked 2 min read How to toggle a boolean using JavaScript ? A boolean value can be toggled in JavaScript by using two approaches which are discussed below: Table of Content Using the logical NOT operatorUsing the ternary operatorUsing the XOR (^) operatorMethod 1: Using the logical NOT operator The logical NOT operator in Boolean algebra is used to negate an 3 min read How to uncheck all other checkboxes apart from one using jQuery ? In this article, we will see how to uncheck all checkboxes except first using jQuery. Approach: First, we need to get all check box elements in a page. We can get all the check-boxes using the following jQuery call: $('input[type=checkbox]') Next we can use jQuery each function to iterate over each 2 min read How to get all checked values of checkbox in JavaScript ? A checkbox is a selection box that enables users to pick true or false in a binary manner by checking or unchecking it. When a checkbox is checked, it shows that the value has been chosen by the user, and when a checkbox is not checked indicates false which denotes that the user has not chosen the v 2 min read Like