How to use Checkbox inside Select Option using JavaScript

We can add the Checkbox inside select option using JavaScript. First we have to select element that shows “Select options” and also create a div that contains CheckBoxes. And according to it add javaScript functionality which is called when the user clicks. For eg: In script part added javaScript functionality which is called when the user clicks on div that contains the select element.

<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>

Leave a comment Cancel reply