Given an HTML document and the task is to add the Checkbox inside select option using JavaScript.
Approach:
- Create a select element that shows “Select options” and also create a div that contains CheckBoxes and style that using CSS.
- Add javaScript functionality which is called when the user clicks on div that contains the select element.
Syntax:
function showCheckboxes() {
var checkboxes = document.getElementById("checkBoxes");
if (show) {
checkboxes.style.display = "block";
show = false;
} else {
checkboxes.style.display = "none";
show = true;
}
}
Complete code:
<!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; } </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> var show = true; function showCheckboxes() { var checkboxes = document.getElementById("checkBoxes"); if (show) { checkboxes.style.display = "block"; show = false; } else { checkboxes.style.display = "none"; show = true; } } </script> </body> </html> |
Output:
