Open In App

How to use Checkbox inside Select Option using JavaScript ?

Improve
Improve
Like Article
Like
Save
Share
Report

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>


Output:



Last Updated : 08 Jan, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads