Article Categories
- All Categories
-
Data Structure
-
Networking
-
RDBMS
-
Operating System
-
Java
-
MS Excel
-
iOS
-
HTML
-
CSS
-
Android
-
Python
-
C Programming
-
C++
-
C#
-
MongoDB
-
MySQL
-
Javascript
-
PHP
-
Economics & Finance
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 JavaScript to manage the values of the checked checkboxes in the custom <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.
Implementation 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
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>
How It Works
The custom select menu works by:
Creating a clickable div that acts as the dropdown trigger
Using a hidden div containing checkboxes as options
Toggling the display property to show/hide options
Using
querySelectorAllto get all checked checkboxesIterating through selected options to display results
Key Benefits
Better user experience than default multi-select
Visual feedback with checkboxes
Easy to customize with CSS
Works across all browsers
Conclusion
Creating a custom select menu with checkboxes provides a much better user experience than the default HTML multi-select. This approach uses simple JavaScript to toggle visibility and collect selected values, making it both functional and user-friendly.
9K+ Views
