In this article, we are going to learn how to use Checkbox inside Select Option using JavaScript.
Approach
-
The HTML contains a styled dropdown (
selectBox
) and hidden checkboxes (checkBoxes
). - CSS styles enhance the appearance, styling the dropdown and checkboxes.
-
The function
showCheckboxes()
toggles checkbox visibility on a dropdown click. - Checkboxes are styled and change color on hover.
- Clicking the dropdown toggles checkbox visibility for user selections.
Syntax:
function showCheckboxes() {
let checkboxes = document.getElementById("checkBoxes");
if (show) {
checkboxes.style.display = "block";
show = false;
} else {
checkboxes.style.display = "none";
show = true;
}
}
Example: In this example, we are following above explained approach.
HTML
<!DOCTYPE html> < html >
< head >
< title >
How to use Checkbox inside Select Option using JavaScript?
</ title >
< style >
h1 {
color: green;
}
.multipleSelection {
width: 300px;
background-color: #BCC2C1;
}
.selectBox {
position: relative;
}
.selectBox select {
width: 100%;
font-weight: bold;
}
.overSelect {
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
#checkBoxes {
display: none;
border: 1px #8DF5E4 solid;
}
#checkBoxes label {
display: block;
}
#checkBoxes label:hover {
background-color: #4F615E;
color: white;
/* Added text color for better visibility */
}
</ style >
</ head >
< body >
< h1 >GEEKSFORGEEKS</ h1 >
< h2 >Use CheckBox inside Select Option</ h2 >
< form >
< div class = "multipleSelection" >
< div class = "selectBox" onclick = "showCheckboxes()" >
< select >
< option >Select options</ option >
</ select >
< div class = "overSelect" ></ div >
</ div >
< div id = "checkBoxes" >
< label for = "first" >
< input type = "checkbox" id = "first" />
checkBox1
</ label >
< label for = "second" >
< input type = "checkbox" id = "second" />
checkBox2
</ label >
< label for = "third" >
< input type = "checkbox" id = "third" />
checkBox3
</ label >
< label for = "fourth" >
< input type = "checkbox" id = "fourth" />
checkBox4
</ label >
</ div >
</ div >
</ form >
< script >
let show = true;
function showCheckboxes() {
let checkboxes = document.getElementById("checkBoxes");
if (show) {
checkboxes.style.display = "block";
show = false;
} else {
checkboxes.style.display = "none";
show = true;
}
}
</ script >
</ body >
</ html >
|
Output: