How to use Checkbox inside Select Option using JavaScript ?

28 May, 2020
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:
CSS-Misc
HTML-Misc
JavaScript-Misc
Picked
CSS
HTML
JavaScript
Web Technologies
Web technologies Questions
HTML
Writing code in comment?
Please use ide.geeksforgeeks.org,
generate link and share the link here.
Types of CSS (Cascading Style Sheet)
How to set space between the flexbox ?
Design a Tribute Page using HTML & CSS
How to position a div at the bottom of its container using CSS?
How to Upload Image into Database and Display it using PHP ?
REST API (Introduction)
How to set the default value for an HTML <select> element ?
Types of CSS (Cascading Style Sheet)
HTTP headers | Content-Type
Design a Tribute Page using HTML & CSS