How to use Checkbox inside Select Option using JavaScript ?
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 >w3wiki</ 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: