How we can create multiple checkbox dropdown using HTML CSS JS? Solution: See this jQuery Multiple Checkbox Dropdown With CSS, Multi Radio Select.
Previously I have shared some checkbox programs, but this is a multi selectable checkbox list. These kinds of checkbox lists are used for choosing interests and multiple things in the same section. Suppose you want to choose more than one thing in a field, then this program can be used at that place.
Today you will learn to create Multi Radio Select program using jQuery. Basically, there is a select field and a submit button, when you will click on that then a dropdown will appear. Inside the dropdown, you will see many items as a list and you can choose more that one.
So, Today I am sharing jQuery Multiple Checkbox Dropdown With CSS. There I have used jQuery for the functioning and as we know it is a JavaScript library. That is why I am putting this post in the JS category, and I think this program will very useful for you.
If you are thinking now how this checkbox dropdown actually is, then see the preview given below.
Preview Of Multi Radio Select List
See this video preview to getting an idea of how this program looks like.
Now you can see this visually, you also can see it live by pressing the button given above. If you like this, then get the source code of its.
You May Also Like:
- jQuery Expandable Search Box
- Horizontal Tab Menu
- Inline Select Option Dropdown
- Circular Progress Bar jQuery
jQuery Multiple Checkbox Dropdown With CSS Source Code
Before sharing source code, let’s talk about it. First I have created the whole structure using the HTML description list attribute (info). For creating the whole structure used <dl> <dt> <dd> tags, and placed the items list inside that using HTML <ul> & <li> tags.
Now using CSS I have placed all the elements on the right place, as you can see in the preview. Inside the list items, I have also placed checkbox input now with CSS I have styled them. In this program, CSS has a minimal part because this is just an example that’s why it is not so fancy to stylish.
jQuery handling here the main feature in this program, because the whole program is based on that library. There jQuery switching CSS class and adding HTML element dynamically. Left all other things you will understand after getting the codes, I can’t explain all in writing.
For creating this program you have to create 3 files. First for HTML, second for CSS, and the third for JavaScript. Follow the steps to creating this without any error.
index.html
Create an HTML file named ‘index.html‘ and put these codes given below.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 |
<!DOCTYPE html> <!--Code By Webdevtrick ( https://webdevtrick.com )--> <html lang="en" > <head> <meta charset="UTF-8"> <title>Multiple Checkbox Dropdown | Webdevtrick.com</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="style.css"><script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script> </head> <body> <dl class="dropdown"> <dt> <a href="#"> <span class="hida">Select</span> <p class="multiselct"></p> </a> </dt> <dd> <div class="mutliSelect"> <ul> <li> <input type="checkbox" value="HTML 5" />HTML 5</li> <li> <input type="checkbox" value="CSS 3" />CSS 3</li> <li> <input type="checkbox" value="JavaScript" />JavaScript</li> <li> <input type="checkbox" value="React JS" />React JS</li> <li> <input type="checkbox" value="Angular" />Angular</li> <li> <input type="checkbox" value="Vue JS" />Vue JS</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="function.js"></script> </body> </html> |
style.css
Now create a CSS file named ‘style.css‘ and put the codes given here.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 |
/* Code By Webdevtrick ( https://webdevtrick.com ) */ body { font: normal 14px/100% "Andale Mono", AndaleMono, monospace; color: #fff; padding: 50px; width: 300px; margin: 0 auto; background-color: #4d4d4d; } .dropdown { position: absolute; top:50%; transform: translateY(-50%); } a { color: #fff; } .dropdown dd, .dropdown dt { margin: 0px; padding: 0px; } .dropdown ul { margin: -1px 0 0 0; } .dropdown dd { position: relative; } .dropdown a, .dropdown a:visited { color: #fff; text-decoration: none; outline: none; font-size: 12px; } .dropdown dt a { background-color: #2e5e68; display: block; padding: 8px 20px 5px 10px; min-height: 25px; line-height: 24px; overflow: hidden; border: 0; width: 272px; } .dropdown dt a span, .multiselct span { cursor: pointer; display: inline-block; padding: 0 3px 2px 0; } .dropdown dd ul { background-color: #2e5e68; border: 0; color: #fff; display: none; left: 0px; padding: 2px 15px 2px 5px; position: absolute; top: 2px; width: 280px; list-style: none; height: 100px; overflow: auto; } .dropdown span.value { display: none; } .dropdown dd ul li a { padding: 5px; display: block; } .dropdown dd ul li a:hover { background-color: #fff; } button { background-color: #2ab1ce; width: 302px; border: 0; padding: 10px 0; margin: 5px 0; text-align: center; color: #fff; font-weight: bold; } |
function.js
The final step, create a JavaScript file named ‘function.js‘ and put the codes.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 |
// Code By Webdevtrick ( https://webdevtrick.com ) $(".dropdown dt a").on('click', function() { $(".dropdown dd ul").slideToggle('fast'); }); $(".dropdown dd ul li a").on('click', function() { $(".dropdown dd ul").hide(); }); function getSelectedValue(id) { return $("#" + id).find("dt a span.value").html(); } $(document).bind('click', function(e) { var $clicked = $(e.target); if (!$clicked.parents().hasClass("dropdown")) $(".dropdown dd ul").hide(); }); $('.mutliSelect input[type="checkbox"]').on('click', function() { var title = $(this).closest('.mutliSelect').find('input[type="checkbox"]').val(), title = $(this).val() + ","; if ($(this).is(':checked')) { var html = '<span title="' + title + '">' + title + '</span>'; $('.multiselct').append(html); $(".hida").hide(); } else { $('span[title="' + title + '"]').remove(); var ret = $(".hida"); $('.dropdown dt a').append(ret); } }); |
That’s It. Now you have successfully created jQuery Multiple Checkbox Dropdown With CSS, Multi Radio Select Program. If you have any doubt or questions comment down below.
Thanks For Visiting, Keep Visiting.
