Data Structure
Networking
RDBMS
Operating System
Java
MS Excel
iOS
HTML
CSS
Android
Python
C Programming
C++
C#
MongoDB
MySQL
Javascript
PHP
Physics
Chemistry
Biology
Mathematics
English
Economics
Psychology
Social Studies
Fashion Studies
Legal Studies
- Selected Reading
- UPSC IAS Exams Notes
- Developer's Best Practices
- Questions and Answers
- Effective Resume Writing
- HR Interview Questions
- Computer Glossary
- Who is Who
How to use Checkbox inside Select Option using JavaScript?
Sometimes, we require to use the checkbox inside the select option. We can allow users to select multiple options by introducing the checkboxes with the select option. However, if we use the multiple attributes with the <select> tag, it allows us to select them by pressing the ‘ctrl + left click’, but it is a bad UX. So, we can introduce the checkbox inside the <select> menu to improve the user experience.
Here, we will use JQuery and JavaScript to manage the values of the checked checkboxes in the <select> menu.
Create a custom select menu
The <select> element of HTML doesn’t allow us to add the checkboxes as an option. So, we can create a custom dropdown menu using the HTML <div> element and add checkboxes as its options.
Syntax
Users can follow the syntax below to manage the checkboxes of a custom dropdown menu using JavaScript.
function showOptions() {
if (showCheckBoxes) {
// show options div
showCheckBoxes = false;
} else {
// hide options div
showCheckBoxes = true;
}
}
function getOptions() {
// selectedOptions is an array containing all checked checkboxes
var selectedOptions = document.querySelectorAll('input[type=checkbox]:checked')
}
In the above syntax, we show the options of custom dropdown based on the value of the showCheckBoxes variable. Also, we can iterate through the array of selectedOptions array to get all checked checkboxes one by one.
Steps
Step 1 − Create a div containing the menu text.
Step 2 − Now, use the custom HTML, and make options using the checkbox input type.
Step 3 − Add the onClick event on the div element. When a user clicks the div, it should call the showOptions() menu.
Step 4 − In JavaScript, declare the showCheckBoxes variable, and initialize it with the true Boolean value. We will show the options of custom dropdown based on the showCheckBoxes variable.
Step 5 − Change the display of options div based on the showCheckBoxes variable’s value whenever the user clicks the dropdown div element.
Step 6 − Now, define a getOptions() function. In the getOptions() function, access all checked checkboxes and print the value of all selected checkboxes by iterating through the selectedOptions array using the for-loop.
Example 1
In the example below, we have created the custom select menu as explained in the above algorithm. Users can select multiple options by checking the multiple checkboxes.
Also, when users click the get selected checkboxes button, it invokes the getOptions() function and prints the value of all selected checkboxes, and in such a way, we can get all selected options of the select menu.
<html>
<head>
<style>
.dropdown {
width: 12rem;
height: 1.5rem;
font-size: 1.3rem;
padding: 0.6 0.5rem;
background-color: aqua;
cursor: pointer;
border-radius: 10px;
border: 2px solid yellow;
}
#options {
margin: 0.5rem 0;
width: 12rem;
background-color: lightgrey;
display: none;
flex-direction: column;
border-radius: 12px;
}
label {
padding: 0.2rem;
}
label:hover {
background-color: aqua;
}
button {
font-size: 1rem;
border-radius: 10px;
padding: 0.5rem;
background-color: yellow;
border: 2px solid green;
margin: 1rem 0;
}
</style>
</head>
<body>
<h2>Creating the custom dropdown menu to use <i>Checkboxes</i> as an option.
</h2>
<div class = "dropdown" onclick = "showOptions()">
show all options
</div>
<div id = "options">
<label for = "one">
<input type = "checkbox" id = "one" value = "First Option" />
First Option
</label>
<label for = "two">
<input type = "checkbox" id = "two" value = "Second Option" />
Second Option
</label>
<label for = "three">
<input type = "checkbox" id = "three" value = "Third Option" />
Third Option
</label>
<label for = "four">
<input type = "checkbox" id = "four" value = "Fourth Option" />
Fourth Option
</label>
<label for = "five">
<input type = "checkbox" id = "five" value = "Fifth Option" />
Fifth Option
</label>
</div>
<div id = "output"> </div>
<button onclick = "getOptions()"> Get all Selected Checkboxes </button>
<script>
let output = document.getElementById('output');
var showCheckBoxes = true;
function showOptions() {
var options =
document.getElementById("options");
if (showCheckBoxes) {
options.style.display = "flex";
showCheckBoxes = !showCheckBoxes;
} else {
options.style.display = "none";
showCheckBoxes = !showCheckBoxes;
}
}
function getOptions() {
var selectedOptions = document.querySelectorAll('input[type=checkbox]:checked')
output.innerHTML = "The selected options are given below. <br/>";
for (var i = 0; i < selectedOptions.length; i++) {
output.innerHTML += selectedOptions[i].value + " , ";
console.log(selectedOptions[i])
}
}
</script>
</body>
</html>
In this tutorial, users learned to create a custom select menu using the html, CSS, and JavaScript. Also, users can use some CSS libraries like Bootstrap to create a select menu with checkboxes.
7K+ Views
To Continue Learning Please Login