Create Animated Checkboxes and Get Values of it Using HTML CSS & JavaScript.

Author - Maketechstuff
September 08, 2023
0

Want to add a touch of animation and interactivity to your website's checkboxes? This guide takes you step-by-step through building beautiful and functional checkboxes, including a sleek right-tick animation on selection. Plus, discover how to implement "Select & Unselect all" functionality and effortlessly retrieve checked or selected checkboxes values.


custom animated checkbox with select and unselect all functionality and getting the value of selected checkbox functionality


Checkbox use to let your user to select multiple options from many given. In this blog post you’ll Learn how to create a custom animated checkbox using HTML, CSS, and JavaScript. This tutorial is beginner-friendly and covers all the steps involved, from creating the checkbox markup to adding the animation, I have also added screenshots and example codes in it.


You'll learn in this blog post:

  • How to create custom animated checkbox.
  • How to check or select all checkboxes (with animation).
  • How to get the value of selected checkboxes.
  • Right tick animation.


I have already shared blog post or projects made using checkbox like simple toggle button and animated ones, show and hide sidebar menu using checkbox etc. You can check it out.


Video Tutorial of Custom Animated Checkboxes.



Custom Animated Checkbox.

How are we going to make this custom animated checkbox.?


So, we are going to make this checkbox with div tags and we make that div tag stylings to change (show as a checkbox but our own made checkbox, a custom one) according to its original checkbox status.


We are going to select and unselect all checkboxes by using a for loop of JavaScript.


we are going to make individual checkbox selection with the foreach method of JavaScript.


File structure:

  1. Create one folder.
  2. Open it in your code editor.
  3. Create two files in that folder with name index.html and index.css.


I've integrated JavaScript within the HTML file.


Now let’s create this custom animated checkbox step by step.


Step 1: Create basic structure of html.

Create basic structure of html.


HTML


<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Custom Animated Checkbox</title>
    <link rel="stylesheet" href="index.css">
</head>

<body>



</body>
<script>



</script>
</html>

CSS


* {
    padding: 0px;
    margin: 0px;
    font-family: sans-serif;
}

body {
    width: 100%;
    height: 100vh;
    background-color: #1e88e5;
    display: flex;
    align-items: center;
    justify-content: center;
}

Output:


background for custom checkbox box


Step 2: Add a checkbox and create a custom checkbox.

So first we are going to add a title.


Then we'll add the checkbox to select and unselect all the checkboxes. After that we'll add the other checkboxes for options.


We are going to make a custom checkbox and its checkmark with HTML. We'll nest the default checkbox and custom checkbox in the label tag for binding. So when a user clicks on a label, its default checkbox state will change.


According to that default checkbox state we'll style or change the custom checkbox stylings for check and uncheck state.


HTML



    <div class="container">
        <h2>Select Your Fruits</h2>

        <!-- Select all checkbox -->
        <label class="select_all_box">
            <input type="checkbox" value="Select All" class="select_all">

            <div class="custom_checkbox_box">
                <div class="custom_checkbox">
                    <div class="line1"></div>
                    <div class="line2"></div>
                </div>
            </div>

            <p>Select All</p>

        </label>
        <!-- Select all checkbox end -->


        <label class="box">
            <input type="checkbox" value="Mango">

            <!-- custom checkbox design -->
            <div class="custom_checkbox_box">
                <div class="custom_checkbox">
                    <div class="line1"></div>
                    <div class="line2"></div>
                </div>
            </div>
            <!-- custom checkbox design end -->

            <p>Mango</p>

        </label>

        <label class="box">
            <input type="checkbox" value="Orange">

            <!-- custom checkbox design -->
            <div class="custom_checkbox_box">
                <div class="custom_checkbox">
                    <div class="line1"></div>
                    <div class="line2"></div>
                </div>
            </div>
            <!-- custom checkbox design end -->

            <p>Orange</p>

        </label>

        <label class="box">
            <input type="checkbox" value="Banana">

            <!-- custom checkbox design -->
            <div class="custom_checkbox_box">
                <div class="custom_checkbox">
                    <div class="line1"></div>
                    <div class="line2"></div>
                </div>
            </div>
            <!-- custom checkbox design end -->

            <p>Banana</p>

        </label>

        <label class="box">
            <input type="checkbox" value="Guava">

            <!-- custom checkbox design -->
            <div class="custom_checkbox_box">
                <div class="custom_checkbox">
                    <div class="line1"></div>
                    <div class="line2"></div>
                </div>
            </div>
            <!-- custom checkbox design end -->

            <p>Guava</p>

        </label>

        <label class="box">
            <input type="checkbox" value="Pomegranate">

            <!-- custom checkbox design -->
            <div class="custom_checkbox_box">
                <div class="custom_checkbox">
                    <div class="line1"></div>
                    <div class="line2"></div>
                </div>
            </div>
            <!-- custom checkbox design end -->

            <p>Pomegranate</p>

        </label>

        <!-- For storing the selected checkbox value -->
        <div class="checkbox_value">
        </div>

        <button type="button" class="button">Save</button>

    </div>

CSS


* {
    padding: 0px;
    margin: 0px;
    font-family: sans-serif;
}

body {
    width: 100%;
    height: 100vh;
    background-color: #1e88e5;
    display: flex;
    align-items: center;
    justify-content: center;
}

.container {
    width: 400px;
    background-color: #fff;
    padding: 15px;
    border-radius: 5px;
}

.container h2 {
    text-align: center;
    font-size: 35px;
    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; */
}

/* ---------- custom checkbox design ---------- */
label .custom_checkbox_box {
    width: 25px;
    height: 25px;
    background-color: #f2f2f2;
    border-radius: 5px;
    /* border: 2px solid; */

}

label .custom_checkbox_box .custom_checkbox {
    width: 25px;
    height: 15px;
    left: 3px;
    /* border: 2px solid; */
    rotate: -45deg;
    position: relative;
}

/*---------- Custom checkbox checkmark animation ----------*/
label .custom_checkbox_box .custom_checkbox .line1 {
    position: absolute;
    height: 100%;
    width: 5px;
    background-color: #1e88e5;
    border-radius: 100px;
}


label .custom_checkbox_box .custom_checkbox .line2 {
    position: absolute;
    height: 5px;
    width: 100%;
    bottom: 0px;
    background-color: #1e88e5;
    border-radius: 100px;
}


/*---------- Custom checkbox checkmark animation ends ----------*/
/* ---------- custom checkbox design ends ---------- */

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;
}

.container button {
    font-size: 25px;
    color: #fff;
    background-color: #1e88e5;
    width: 100%;
    padding: 10px 0px;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    transition: 0.2s;
}

.container button:active {
    transform: scale(0.9);
}

Output:


custom animated checkbox design


As you can see in the image above the default checkbox and custom checkbox is visible clearly.

The div tag with class line1 and line2 is for the right tick inside the custom checkbox (class="checkbox_box").


Initially we'll hide the custom checkbox checkmarks (class="line1", class="line2"). We'll only show that checkmark when its default checkbox is selected otherwise we'll hide it.


To hide the checkmark (class line1 and line2) we'll remove the width and height. Because we want to show it with animation. And also add transition properties.


CSS


label .custom_checkbox_box .custom_checkbox .line1{
    position: absolute;
    height: 0%;
    width: 5px;
    background-color: #1e88e5;
    border-radius: 100px;
    transition: 0.1s;
    transition-delay: 0.1s;
}

label .custom_checkbox_box .custom_checkbox .line2{
    position: absolute;
    height: 5px;
    width: 0%;
    bottom: 0px;
    background-color: #1e88e5;
    border-radius: 100px;
    transition: 0.1s;
}

Output:


custom checkbox


As you can see the custom checkboxes are unselected means the checkmark (class line1 and line2) is removed. Now we only want to select or show it when their default checkbox is selected.


So for that we going to create and add separate class with name active to custom_checkbox_box class.


Right now before adding active class this below css is applied:


CSS


label .custom_checkbox_box .custom_checkbox .line1{
    position: absolute;
    height: 0%;
    width: 5px;
    background-color: #1e88e5;
    border-radius: 100px;
    transition: 0.1s;
    transition-delay: 0.1s;
}

label .custom_checkbox_box .custom_checkbox .line2{
    position: absolute;
    height: 5px;
    width: 0%;
    bottom: 0px;
    background-color: #1e88e5;
    border-radius: 100px;
    transition: 0.1s;
}


After adding active class this below css will be apply.


CSS


label .active .custom_checkbox .line1{
    height: 100%;
    transition: 0.1s;
}
label .active .custom_checkbox .line2{
    width: 100%;
    transition: 0.1s;
    transition-delay: 0.1s;
}


In both the case the class line1 and line2 styles are changes and that's for checkmark in custom checkbox. 
In first case when active class is absent the checkmark will not be visible and in second css when active class is present the checkmark will be visible.


So by adding active class to custom_checkbox_box you can change the line1 and line2 styling or you can say you can show the checkmark of custom checkbox.


We'll add and remove this active class in custom_checkbox_box through JavaScript according to their particular default checkox state.


Step 3: Add JavaScript for functionality of custom checkbox.

First, we going to make functionality to check and uncheck checkbox or select and unselect checkbox individually by adding the active class inside the custom_checkbox_box class.


So, there is many checkboxes and we have to apply function to all checkboxes so for that we going to use foreach method of JavaScript.


JavaScript


    let box = document.querySelectorAll(".box");

    box.forEach(box => {
        let checkbox = box.querySelector(".box input");
        let custom_checkbox_box = box.querySelector(".box .custom_checkbox_box");

        box.onclick = function(){
            if(checkbox.checked){
                custom_checkbox_box.classList.add("active");
            }else{
                custom_checkbox_box.classList.remove("active");

            }
        }

    });

Output:




As you can see when checkbox is checked the custom checkbox also get selected.

Now if you want to check, if any checkboxes is selected on not already. You can do like this:


JavaScript



    let box = document.querySelectorAll(".box");

    box.forEach(box => {
        let checkbox = box.querySelector(".box input");
        let custom_checkbox_box = box.querySelector(".box .custom_checkbox_box");
        box.addEventListener("click", select_checkbox);
        window.addEventListener("load", select_checkbox);
        function select_checkbox() {
            if (checkbox.checked) {
                custom_checkbox_box.classList.add("active");
            } else {
                custom_checkbox_box.classList.remove("active");

            }
        }

    });


So now when any default checkbox selected already. Then its custom checkbox also will get selected accordingly on page load.


As the custom checkbox is working let's hide the default checkboxes. By display: none Property.


Add functionality to select and unselect all checkboxes.

Now let’s add functionality to select all and unselect all checkboxes. So, for that we going to use forloop of JavaScript.


First, we going to check on click, if select all checkbox (means the first checkbox or the checkbox for select all checkboxes) is checked or not. 

If checked then we run function to select all checkboxes and if not checked then we run function to deselect or unselect all checkboxes.


JavaScript


    let select_all_box = document.querySelector(".select_all_box");
    let select_all_checkbox = document.querySelector(".select_all");
    let select_all_custom_checkbox_box = document.querySelector(".custom_checkbox_box");

    select_all_box.onclick = function(){
        if(select_all_checkbox.checked){   
            select_all_custom_checkbox_box.classList.add("active");
            select_all_function();
        }else{
            select_all_custom_checkbox_box.classList.remove("active");
            unselect_all_function();
        }
    }


Select all checkbox functionallity is ready. Means checkbox for select all is now will be select when its default checkbox is selected.


As you can see above code:

You can also select custom_checkbox_box like this:


JavaScript



    let select_all_custom_checkbox_box = document.querySelector(".select_all_box .custom_checkbox_box");


Function to select all checkboxes.

Let's declare the function that we call above.

JavaScript


    // select all checkboxes.

    let checkbox = document.querySelectorAll(".box input");
    let custom_checkbox_box = document.querySelectorAll(".box .custom_checkbox_box");
    
    function select_all_function(){
        for (let i = 0; i < box.length; i++) {
            const element = checkbox[i];
            if(element.type == "checkbox"){
                element.checked = true;
                setTimeout(() => {
                    custom_checkbox_box[i].classList.add("active");
                }, i * 100);
            }
        }
    }


Now when user select the select all checkbox option all checkbox will selected with their custom checkboxes also.


Function to unselect all checkboxes.

Its same code as select all checkboxes code above, we have to change from checkbox.checked = true to checkbox.checked = false and remove active class from custom_checkbox_box.


Note: In both select all and unselect all checkbox function I have added set timeout function with some delay according to its index value. To make it work good you have to add same timer in set timeout method in both select all and unselect all functions. Otherwise, it won’t work.


JavaScript


    // unselect all checkboxes

    function unselect_all_function(){
        for (let i = 0; i < box.length; i++) {
            const element = checkbox[i];
            if(element.type == "checkbox"){
                element.checked = false;
                setTimeout(() => {
                    custom_checkbox_box[i].classList.remove("active");
                }, i * 100);
            }
        }
    }


Now if user unselect select all option, then all default checkbox will be unselected with their custom checkboxes.


Function to get the value of checked checkboxes.

Again, we run forloop on click of button (class="button"). That checked the checkboxes if it checked, it adds the value in that div tag (class="checkbox_value").


JavaScript


    // Getting the value of checked or selected checkboxes.

    let button = document.querySelector(".button");
    let checkbox_value = document.querySelector(".checkbox_value");

    button.onclick = function(){
        checkbox_value.innerHTML = "";
        for (let g = 0; g < box.length; g++) {
            const element = checkbox[g];
            if(element.checked){
                checkbox_value.innerHTML += `<p>`+ element.value +`</p>`;
            }
        }
    }

Output:


Get the value of selected checkbox


So that’s it you can see demo in above YouTube video.


You may like:

  1. How to create circular checkboxes using HTML CSS and JavaScript.
  2. How to create checkmark animation using HTML CSS & JavaScript.
  3. How to create custom animated radio button using HTML CSS and JavaScript.
  4. How to create a radio button value using JavaScript.
  5. How to create a select and unselect checkboxes using JavaScript.
  6. How to use label tag to design the custom choose file button.


Final code



Thanks for reading.


Tags

You may like these posts

Show more

Post a Comment

0Comments

Share your thoughts.

Post a Comment (0)
Share to other apps
Copy Post Link
To Top