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:
- 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;" >
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:
- 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;" >
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 ;
}
}
window.onload = function () {
window.addEventListener('load', checkAll, false);
}
</script>
</ body >
</ html >
|
Output:Â
How to Check/Uncheck the checkbox using JavaScript ?
Last Updated :
27 Dec, 2023
Like Article
Save Article
Share your thoughts in the comments
Please Login to comment...