Creating a Select All and Deselect All Checkbox using CSS and JavaScript Tutorial

Submitted by oretnom23 on Tuesday, March 14, 2023 - 17:28.

In this tutorial, you can learn how to create a Select All and Deselect All Checkbox functionality using CSS and JavaScript. This tutorial aims to provide students and beginners with a reference for learning some useful techniques and components for building creative web application features. Here, I will be providing a simple web page script that demonstrates the creation of the Select All and Deselect All Checkbox functionality.

What is the Select All and Deselect All Checkbox?

Select All and Deselect All Checkbox is a software feature that allows users to easily select and deselect multiple data or checkboxes. This component is usually or commonly implement with the website or feature for bulk actions such as bulk deletion of data.

How to create a Select All and Deselect All Checkbox?

Creating a Select All and Deselect All Checkbox can be achieved easily using JavaScript. JavaScript comes with built-in methods and APIs that are useful to achieve this. We can create this functionality by Identifying the current state of a checkbox every time the user updates the checkbox value. Check out the web page scripts that I have provided below to understand this more.

Sample Web Page

The script below results in a simple web application page that contains a static list with checkboxes. It has the capability to check and uncheck all the checkboxes at once. In addition, the main checkbox is automatically updated to checked or unchecked if the child checkboxes are manually managed.

Page Interface

Here's the HTML file script of the page that contains the page layout and static content elements.

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
  6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  7.     <title>CSS and JS - Checklist</title>
  8.     <link rel="preconnect" href="https://fonts.googleapis.com">
  9.     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
  10.     <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200" />
  11.     <link rel="stylesheet" href="style.css">
  12. </head>
  13. <body>
  14.     <div id="wrapper">
  15.         <div class="page-title">Creating a Select All and Deselect All Checkbox using CSS and JavaScript</div>
  16.         <hr style="margin:auto; width:25px">
  17.         <div id="checklist-wrapper">
  18.             <div id="main-check">
  19.                 <div class="check-item">
  20.                     <input type="checkbox" id="selectAll">
  21.                     <label for="selectAll"></label>
  22.                 </div>
  23.                 <div>
  24.                     <label for="selectAll" id="mainCheckLabel">Select All</label>
  25.                 </div>
  26.             </div>
  27.             <hr>
  28.             <div class="list-group">
  29.                 <div class="list-item">
  30.                     <div class="check-item">
  31.                         <input type="checkbox" id="checkbox1" checked>
  32.                         <label for="checkbox1"></label>
  33.                     </div>
  34.                     <div>
  35.                         <label for="checkbox1">Sample Data 101</label>
  36.                     </div>
  37.                 </div>
  38.                 <div class="list-item">
  39.                     <div class="check-item">
  40.                         <input type="checkbox" id="checkbox2">
  41.                         <label for="checkbox2"></label>
  42.                     </div>
  43.                     <div>
  44.                         <label for="checkbox2">Sample Data 201</label>
  45.                     </div>
  46.                 </div>
  47.                 <div class="list-item">
  48.                     <div class="check-item">
  49.                         <input type="checkbox" id="checkbox3">
  50.                         <label for="checkbox3"></label>
  51.                     </div>
  52.                     <div>
  53.                         <label for="checkbox3">Sample Data 301</label>
  54.                     </div>
  55.                 </div>
  56.             </div>
  57.         </div>
  58.     </div>
  59.     <script src="script.js"></script>
  60. </body>
  61. </html>

Stylesheet

Here's the CSS script that I created for the design of the page and custom checkbox.

  1.     @import url('https://fonts.googleapis.com/css2?family=Courgette&family=Secular+One&display=swap" rel="stylesheet');
  2.     :root{
  3.         --secular-font: 'Secular One', sans-serif;
  4.     }
  5.     *{
  6.         box-sizing: border-box;
  7.     }
  8.     body *{
  9.         font-family: 'Rubik', sans-serif;
  10.     }
  11.     /**
  12.     Page Design
  13.     */
  14.     body,
  15.     html{
  16.         height: 100%;
  17.         width: 100%;
  18.         margin: 0;
  19.         padding: 0;
  20.     }
  21.     body{
  22.         background-color: #363636;
  23.     }
  24.     /* Page Wrapper */
  25.     #wrapper{
  26.         width: 100%;
  27.         padding: 3em 5em;
  28.     }
  29.     .page-title{
  30.         font-size: 2.5rem;
  31.         font-weight: 500;
  32.         color: #fff;
  33.         letter-spacing: 3px;
  34.         font-family: var(--secular-font);
  35.         text-align: center;
  36.     }
  37.     /* Checklist Wrapper */
  38.     #checklist-wrapper{
  39.         width: 300px;
  40.         padding: 2em 1em;
  41.         background-color: #fff;
  42.         border: 1px solid #d3d3d3;
  43.         box-shadow:0px 0px 7px #a5a5a5;
  44.         margin: auto;
  45.         margin-top: 1em;
  46.     }
  47.     #main-check{
  48.         display: flex;
  49.         width: 100%;
  50.         align-items: center;
  51.     }
  52.     /* Checklist */
  53.     #checklist-wrapper .list-group{
  54.         position: relative;
  55.         width:100%;
  56.     }
  57.  
  58.     /* Checklist */
  59.     #checklist-wrapper .list-group .list-item{
  60.         position: relative;
  61.         width:100%;
  62.         display: flex;
  63.         flex-wrap: wrap;
  64.         align-items: center;
  65.         padding: 0.5em 0.5em;
  66.         border: 1px solid #e9e9e9;
  67.     }
  68.  
  69.     /* Checkboxes Items */
  70.     .check-item {
  71.         padding: .35em;
  72.     }
  73.     .check-item input[type="checkbox"]{
  74.         display: none;
  75.     }
  76.  
  77.     /* Checkboxes Items Label/Custom Checkbox */
  78.  
  79.     .check-item input[type="checkbox"] ~ label{
  80.         width: 15px;
  81.         height: 15px;
  82.         border: 1px solid #0e93ff;
  83.         display: flex;
  84.         align-items:center;
  85.         justify-content:center;
  86.         cursor: pointer;
  87.     }
  88.     .check-item input[type="checkbox"]:checked ~ label{
  89.         border-color: #0086f3;
  90.         box-shadow: 0px 0px 3px #0086f3a4;
  91.     }
  92.     .check-item input[type="checkbox"]:checked ~ label:before{
  93.         content: "\2714";
  94.         font-size: 12px;
  95.         color: #0086f3;
  96.     }

JavaScript

Lastly, here is the JavaScript file script that contains the code that makes the select/deselect all functionality possible.

  1. const mainCheck = document.getElementById('selectAll')
  2. const checkboxes = document.querySelectorAll('.list-group .check-item input[type="checkbox"]')
  3.  
  4. /** Select/Deselect All Check boxes */
  5. mainCheck.addEventListener('change',()=>{
  6.     if(mainCheck.checked == true){
  7.         checkboxes.forEach(checkbox => {
  8.             checkbox.checked = true
  9.         })
  10.     }else{
  11.         checkboxes.forEach(checkbox => {
  12.             checkbox.checked = false
  13.         })
  14.     }
  15.     UpdateMainLabel();
  16. })
  17.  
  18. /** Update Main Checkbox Label */
  19. const UpdateMainLabel = ()=>{
  20.     if(mainCheck.checked == true){
  21.         document.querySelector('#mainCheckLabel').innerText = "Deselect All"
  22.     }else{
  23.         document.querySelector('#mainCheckLabel').innerText = "Select All"
  24.     }
  25. }
  26.  
  27. /** Update Main Checkbox when child checkboxes has changes */
  28. checkboxes.forEach(checkbox =>{
  29.     checkbox.addEventListener('change', ()=>{
  30.         checkedboxes = document.querySelectorAll('.list-group .check-item input[type="checkbox"]:checked')
  31.         if(checkboxes.length == checkedboxes.length){
  32.             mainCheck.checked = true
  33.         }else{
  34.             mainCheck.checked = false
  35.         }
  36.         UpdateMainLabel();
  37.     })
  38. })

Result

Here are the snapshots of the overall result of the script I have provided above:

Select All Checkboxes

Select and Deselect All Checkbox using javascript

Deselect All Checkboxes

Select and Deselect All Checkbox using javascript

Partially Select Checkboxes

Select and Deselect All Checkbox using javascript

There you go! I have also provided the complete source code zip file that I created for this tutorial on this website and it is free to download. Feel free to download and modify it to make some experiments to enhance your knowledge and skills. The download button is located below this tutorial's content.

That's it! I hope this Creating a Select All and Deselect All Checkbox using CSS and JavaScript Tutorial will help you with what you are looking for and will be useful for your current and future web application projects.

Explore more on this website for more Tutorials and Free Source Codes.

Happy Coding =)

Tags

Add new comment

About text formats
  • 202 views