Open In App

How to use Checkbox inside Select Option using JavaScript ?

Improve
Improve
Improve
Like Article
Like
Save Article
Save
Share
Report issue
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