Create a Custom Checkbox using HTML CSS and JavaScript

Last Updated : 17 Nov, 2023

This article will show you how to create a custom checkbox using HTML, CSS, and JavaScript that enables users to check on checkboxes along with the ” Select all ” feature. We have written a code that generates a card in the center of the window. The card displays a list of items along with checkboxes which allow the user to select items either randomly or with the “select all” feature.

Preview

Approach

First create an HTML card, including the list of items with checkboxes and a “select all” item for selecting all items.
Design the card with CSS to make the better design of the card with CSS properties.
In javascript implement the function selectAllCheckboxes, unselectAllCheckboxes, initializeCustomCheckboxes, and updateCustomCheckbox.
Ensure DOMContentLoaded event listener ensures all these functions are initialized when the page loads, allowing for smooth interaction with the custom checkboxes.

Example: In this example, we will implement a custom checkbox where users can check all lists either manually or select all.

Javascript

function initializeCustomCheckboxes() { 
    const checkboxes = document.querySelectorAll(".box input"); 
  
    checkboxes.forEach((checkbox) => { 
        checkbox.addEventListener("change", updateCustomCheckbox); 
    }); 
} 
  
function updateCustomCheckbox(event) { 
    const checkbox = event.target; 
    const customCheckboxBox =  
        checkbox.parentElement.querySelector(".check_box"); 
  
    if (checkbox.checked) { 
        customCheckboxBox.classList.add("active"); 
    } else { 
        customCheckboxBox.classList.remove("active"); 
    } 
} 
  
function initializeSelectAll() { 
    const selectAllCheckbox = document.querySelector(".select_all"); 
    const selectAllCustomCheckboxBox = document.querySelector( 
        ".select_all_box .check_box"
    ); 
  
    selectAllCheckbox.addEventListener("change", () => { 
        if (selectAllCheckbox.checked) { 
            selectAllCustomCheckboxBox.classList.add("active"); 
            selectAllCheckboxes(); 
        } else { 
            selectAllCustomCheckboxBox.classList.remove("active"); 
            unselectAllCheckboxes(); 
        } 
    }); 
} 
  
function selectAllCheckboxes() { 
    const checkboxes = document.querySelectorAll(".box input"); 
  
    checkboxes.forEach((checkbox, index) => { 
        setTimeout(() => { 
            checkbox.checked = true; 
            updateCustomCheckbox({ target: checkbox }); 
        }, index * 100); 
    }); 
} 
  
function unselectAllCheckboxes() { 
    const checkboxes = document.querySelectorAll(".box input"); 
  
    checkboxes.forEach((checkbox, index) => { 
        setTimeout(() => { 
            checkbox.checked = false; 
            updateCustomCheckbox({ target: checkbox }); 
        }, index * 100); 
    }); 
} 
  
// Initialize everything when the page loads 
document.addEventListener("DOMContentLoaded", () => { 
    initializeCustomCheckboxes(); 
    initializeSelectAll(); 
}); 

HTML

<!-- index.html -->
<!DOCTYPE html> 
<html lang="en"> 
  
<head> 
    <meta charset="UTF-8"> 
    <meta name="viewport" content= 
        "width=device-width, initial-scale=1.0"> 
    <title> 
        Custom Checkbox Design using  
        HTML CSS and JavaScript 
    </title> 
      
    <link rel="stylesheet" href="style.css"> 
</head> 
  
<body> 
    <div class="container"> 
        <h2>Select Your Programming Language</h2> 
  
        <label class="select_all_box"> 
            <input type="checkbox" 
                value="Select All" class="select_all"> 
  
            <div class="check_box"> 
                <div class="custome_check"> 
                    <div class="line1"></div> 
                    <div class="line2"></div> 
                </div> 
            </div> 
  
            <p>Select All</p> 
        </label> 
  
        <label class="box"> 
            <input type="checkbox" value="Mango"> 
  
            <div class="check_box"> 
                <div class="custome_check"> 
                    <div class="line1"></div> 
                    <div class="line2"></div> 
                </div> 
            </div> 
  
            <p>JAVASCRIPT</p> 
        </label> 
  
        <label class="box"> 
            <input type="checkbox" value="Mango"> 
  
            <div class="check_box"> 
                <div class="custome_check"> 
                    <div class="line1"></div> 
                    <div class="line2"></div> 
                </div> 
            </div> 
  
            <p>C ++</p> 
        </label> 
  
        <label class="box"> 
            <input type="checkbox" value="Mango"> 
  
            <div class="check_box"> 
                <div class="custome_check"> 
                    <div class="line1"></div> 
                    <div class="line2"></div> 
                </div> 
            </div> 
  
            <p>JAVA</p> 
        </label> 
  
        <label class="box"> 
            <input type="checkbox" value="Orange"> 
  
            <div class="check_box"> 
                <div class="custome_check"> 
                    <div class="line1"></div> 
                    <div class="line2"></div> 
                </div> 
            </div> 
  
            <p>PYTHON</p> 
        </label> 
  
        <div class="checkbox_value"></div> 
    </div> 
  
    <script src="script.js"></script> 
</body> 
  
</html>

CSS

/* style.css */
* { 
    padding: 0px; 
    margin: 0px; 
    font-family: sans-serif; 
} 
  
body { 
    width: 100%; 
    height: 100vh; 
    background-color: #eee; 
    display: flex; 
    align-items: center; 
    justify-content: center; 
} 
  
.container { 
    width: 500px; 
    background-color: #fff; 
    padding: 15px; 
    border-radius: 15px; 
    box-shadow: 0px 0px 20px 0px grey; 
} 
  
.container h2 { 
    text-align: center; 
    font-size: 25px; 
    margin-top: 20px; 
    margin-bottom: 40px; 
} 
  
.container label { 
    display: flex; 
    align-items: center; 
    margin: 15px 0px; 
    padding: 15px; 
    border-radius: 5px; 
    cursor: pointer; 
    transition: 0.2s; 
} 
  
.container label:hover { 
    background-color: #c5cae9; 
} 
  
input[type="checkbox"] { 
    display: none; 
} 
  
label .check_box { 
    width: 25px; 
    height: 25px; 
    background-color: #f2f2f2; 
    border-radius: 5px; 
} 
  
label .check_box .custome_check { 
    width: 25px; 
    height: 15px; 
    left: 3px; 
    rotate: -45deg; 
    position: relative; 
} 
  
label .check_box .custome_check .line1 { 
    position: absolute; 
    height: 0%; 
    width: 5px; 
    background-color: #1e88e5; 
    border-radius: 100px; 
    transition: 0.1s; 
    transition-delay: 0.1s; 
} 
  
label .active .custome_check .line1 { 
    height: 100%; 
    transition: 0.1s; 
} 
  
label .check_box .custome_check .line2 { 
    position: absolute; 
    height: 5px; 
    width: 0%; 
    bottom: 0px; 
    background-color: #1e88e5; 
    border-radius: 100px; 
    transition: 0.1s; 
} 
  
label .active .custome_check .line2 { 
    width: 100%; 
    transition: 0.1s; 
    transition-delay: 0.1s; 
} 
  
label p { 
    margin-left: 15px; 
    font-size: 25px; 
} 
  
.container .checkbox_value p { 
    font-size: 20px; 
    background-color: #f2f2f2; 
    padding: 5px 15px; 
    display: inline-block; 
    border-radius: 50px; 
    margin: 5px; 
}