Multiple Checkbox Dropdown using JavaScript

Multiple Checkbox Dropdown using JavaScript

Hello Coders! Welcome to JavaScript Animation Blog. In this, we're going to see how to create a dropdown with checkboxes and user can select multiple list values, which will ultimately be seen on the input box. If user deselects something, it will get update in the textbox accordingly. This is the most basic functionality which every websites has to allow user select multiple values.

Here's a preview-

example-_1_.gif

That being said, let us get started.

Step - 1: Like always, create 3 files - index.html , style.css and script.js.

Step - 2: Copy the below HTML code and paste it into your code editor.

HTML


<html lang="en" >
<head>
  <meta charset="UTF-8">
  <title>Multiple Checkbox Dropdown</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>

    <dl class="dropdown">
        <dt>
            <a href="#">
                <span class="hide">Select</span>
                <p class="list"></p>
            </a>
        </dt>
        <dd>
            <div class="multiselect">
                <ul>
                    <li><input type="checkbox" value="HTML5" />HTML5</li>
                    <li><input type="checkbox" value="CSS3" />CSS3</li>
                    <li><input type="checkbox" value="JavaScript" />JavaScript</li>
                    <li><input type="checkbox" value="ReactJS" />ReactJS</li>
                    <li><input type="checkbox" value="Angular" />Angular</li>
                    <li><input type="checkbox" value="Vue" />Vue</li>
                    <li><input type="checkbox" value="HTML5" />Github</li>
                </ul>
            </div>
        </dd>
        <button>Submit</button>
    </dl>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script  src="script.js"></script>

</body>
</html>

Step - 3: Below is the CSS code for styling.

CSS


@import url(https://fonts.googleapis.com/css?family=Roboto:400,500,700);
body{
    font-family: "Roboto";
    background: #f6f7fc;
    padding: 50px;
    margin: 0 auto;
    width: 300px;
}
.dropdown{
    position: absolute;
    top: 50%;
    transform: translateY(-90%);
}
.dropdown dd, .dropdown dt{
    margin: 0;
    padding: 0;
}
.dropdown ul{
    margin: -1 0 0 0;
}
.dropdown dd{
    position: relative;
}
.dropdown a, .dropdown a:visited{
    text-decoration: none;
    outline: none;
    font-size: 16px;
    border-radius: 15px;
    color: #fff;
}
.dropdown dt a{
    background-color: #b74096;
    display: block;
    padding: 8px 20px 5px 10px;
    width: 275px;
    min-height: 25px;
    line-height: 24px;
    border: 0;
    overflow: hidden;
    text-align: center;
    letter-spacing: 2px;
}
.dropdown dd ul{
    background-color: #b74096;
    border-radius: 15px;
    margin-top: 5%;
    color: #fff;
    list-style: none;
    left: 0;
    padding: 15px;
    top: 2px;
    position: absolute;
    width: 280px;
    height: 100px;
    overflow: auto;
    opacity: 0.7;
    display: none;
}
button{
    width: 302px;
    margin: 15px 0;
    background-color: transparent;
    border: 2px solid #b74096;
    padding: 10px;
    border-radius: 15px;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 2px;
    color: #b74096;
    transition: 0.5s all;
}
button:hover{
    background-color: #b74096;
    color: #fff;
}

Step - 4: Below is the JS code for the functionality.

JS

$(".dropdown dt a").on('click', function(){
    $(".dropdown dd ul").slideToggle('fast')
});

$('.multiselect input[type="checkbox"]').on('click', function(){
    var title = $(this).closest('.multiselect').find('input[type="checkbox"]').val(),
        title = $(this).val() + " - ";

    if($(this).is(':checked')){
        var html = '<span title="'+title+'">' + title + '</span>';
        $('.list').append(html);
        $('.hide').hide()
    }
    else{
        $('span[title="'+title+'"]').remove();
        var ret = $('.hide');
        $('.dropdown dt a').append(ret);
    }
});

And that's it. You're done.

Let me know in the comments if you have any doubt related to this.

Follow @creocodigo for more projects and web related content.

If you find this useful, below are some other posts that I am sure you'll love