How to use Checkbox inside Select Option using JavaScript ?

0 0 1 minute read

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> 