In this blog post, unlock the secrets of creating a "Select & Unselect All" checkbox functionality using JavaScript. This powerful feature allows users to effortlessly select or unselect all options with a single click, significantly improving user experience and smooth interactions.
You may have encountered this convenient functionality on countless websites and web applications.
You’ll learn how to:
- Implement a dynamic "Select & Unselect All" checkbox.
- Control the state of multiple checkboxes with ease.
- Boost user engagement and simplify form interactions.
This comprehensive guide provides explanations, demonstrations, and practical code examples. By following along, you'll be able to successfully create this functionality.
JavaScript used:
- For loop.
- Onclick Event.
Select and Unselect All Checkboxes on click.
It's simple to make this. So we are going to make one main checkbox, depending on that checkbox state we are going to change the states of other checkboxes.
HTML
<!DOCTYPE html>
<html lang="en">
<!-- maketechstuff.com -->
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Select & Unselect All Checkboxes | maketechstuff.com</title>
<!-- <link rel="stylesheet" href="index.css"> -->
</head>
<body>
<div class="box">
<label class="select_all_option">
<input type="checkbox" id="checkbox_to_select_all">
<p>Select All Fruits</p>
</label>
<label>
<input type="checkbox">
<p>Mango</p>
</label>
<label>
<input type="checkbox">
<p>Banana</p>
</label>
<label>
<input type="checkbox">
<p>Apple</p>
</label>
<label>
<input type="checkbox">
<p>Orange</p>
</label>
<label>
<input type="checkbox">
<p>Grapes</p>
</label>
<label>
<input type="checkbox">
<p>Papaya</p>
</label>
</div>
</body>
</html>
CSS
* {
padding: 0px;
margin: 0px;
font-family: sans-serif;
}
body {
width: 100%;
height: 100vh;
/* background: linear-gradient(45deg, #42A5F5, #5C6BC0); */
position: relative;
}
.box{
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
}
.box label{
display: flex;
align-items: center;
cursor: pointer;
}
.box label p{
margin-left: 10px;
}
JavaScript
let checkbox_to_select_all = document.getElementById("checkbox_to_select_all");
let checkboxes = document.querySelectorAll(".box label input");
let select_all_option = document.querySelector(".select_all_option");
select_all_option.addEventListener("click" , select_all);
function select_all(){
if(checkbox_to_select_all.checked){
for (let i = 0; i < checkboxes.length; i++) {
const element = checkboxes[i];
if(element.type == "checkbox"){
element.checked = true;
}
}
}else{
for (let i = 0; i < checkboxes.length; i++) {
const element = checkboxes[i];
if(element.type == "checkbox"){
element.checked = false;
}
}
}
}
Output:
You can enhance this feature further by adding customization like:
- Adding custom styling to checkboxes.
- Get the value of selected checkboxes on a single click.
- Select & unselect all checkboxes with animation.
- checkbox selection animation.
So that's how you can create a function to select and unselect all checkboxes using javascript. If you have any query or suggestion. Feel free to ask in the comment section.
Thanks for reading.
Share your thoughts.