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
Approach 1: Using the onclick event
- 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:
Approach 2: Using the window.addEventListener and window.onload functions
- In this approach, we are creating two functions one for check the checkboxes and another one for uncheck the checkboxes.
- Using window.addEventListener and window.onload functions to set unchecked the checkboxes by default.
- After that, we have created two buttons for check and uncheck the checkboxes according to our need.
- Any of the button get clicked the respective function will be called.
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 = "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: