How to use Checkbox inside Select Option using JavaScript ?

Last Updated : 08 Jan, 2024

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