Do you want to create a functionality to check and uncheck all checkboxes ? This JavaScript code snippet helps you to create this feature. It demonstrates different approaches to implement this functionality, which is useful in scenarios where you need to quickly select or deselect multiple options in a form or list.
This tutorial provides three versions, each using a slightly different technique, offering flexibility and understanding of various JavaScript concepts.
Adding Header Assets
First, include the Bootstrap CSS library to provide a basic styling and layout to our elements.
<link rel='stylesheet' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'>
Creating the HTML Structure
Next, create the HTML structure that contains the checkboxes and buttons for each version. Each version demonstrates a different way to handle the “check all” and “uncheck all” functionality.
<div class="container">
<div class="row">
<div class="col-sm-4">
<form>
<legend>Version 1<small>Single buttons</small></legend>
<div class="checkbox">
<input type="button" id="checkall1" class="btn btn-link" value="Un/check All">
</div>
<div class="checkbox">
<label>
<input type="checkbox" class="check1"> Check me out
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" class="check1"> Check me out
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" class="check1"> Check me out
</label>
</div>
</form>
</div>
<div class="col-sm-4">
<form>
<legend>Version 2<small>Separate buttons</small></legend>
<div>
<input type="button" onclick="checkAll2()" class="btn btn-link" value="Check All">
<input type="button" onclick="uncheckAll2()" class="btn btn-link" value="Uncheck All">
</div>
<div class="checkbox">
<label>
<input type="checkbox" class="check2"> Check me out
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" class="check2"> Check me out
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" class="check2"> Check me out
</label>
</div>
</form>
</div>
<div class="col-sm-4">
<form>
<legend>Version 3<small>Reset button</small></legend>
<div>
<input type="button" onclick="checkAll3()" class="btn btn-link" value="Check All">
<input type="reset" class="btn btn-link" value="Uncheck All">
</div>
<div class="checkbox">
<label>
<input type="checkbox" class="check3"> Check me out
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" class="check3"> Check me out
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" class="check3"> Check me out
</label>
</div>
</form>
</div>
</div>
</div>
<script src="./script.js"></script>
Now, add the following CSS to style the basic UI. You can customize it according to your needs.
body {
padding: 1em;
}
legend small {
display: block;
font-size: 12px;
}
Finally, add the following JavaScript code just before closing the <body> tag to make check all/uncheck all feature functional.
// v1
function checkAll1() {
var inputs = document.querySelectorAll('.check1');
for (var i = 0; i < inputs.length; i++) {
inputs[i].checked = true;
}
this.onclick = uncheckAll1;
}
function uncheckAll1() {
var inputs = document.querySelectorAll('.check1');
for (var i = 0; i < inputs.length; i++) {
inputs[i].checked = false;
}
this.onclick = checkAll1; //function reference to original function
}
var el = document.getElementById("checkall1"); //let for ES6 aficionados
el.onclick = checkAll1; //again, function reference, no ()
//v2
function checkAll2() {
var inputs = document.querySelectorAll('.check2');
for(var i = 0; i < inputs.length; i++) {
inputs[i].checked = true;
}
}
function uncheckAll2() {
var inputs = document.querySelectorAll('.check2');
for(var i = 0; i < inputs.length; i++) {
inputs[i].checked = false;
}
}
window.onload = function() {
window.addEventListener('load', checkAll2, false);
}
//v3
function checkAll3() {
var inputs = document.querySelectorAll('.check3');
for(var i = 0; i < inputs.length; i++) {
inputs[i].checked = true;
}
}
window.onload = function() {
window.addEventListener('load', checkAll3, false);
}
That’s it! You have successfully learned how to Check And Uncheck All Checkbox Using JavaScript using different methods.
