Open In App
Related Articles

How to use Checkbox inside Select Option using JavaScript ?

Improve Article
Save Article
Like Article

Given an HTML document and the task is to add the Checkbox inside select option using JavaScript.


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


function showCheckboxes() {
    var checkboxes = document.getElementById("checkBoxes");

    if (show) { = "block";
        show = false;
    } else { = "none";
        show = true;

Complete code:

<!DOCTYPE html>
        How to use Checkbox inside Select 
        Option using JavaScript?
        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;
    <h2>Use CheckBox inside Select Option</h2>
        <div class="multipleSelection">
            <div class="selectBox" 
                    <option>Select options</option>
                <div class="overSelect"></div>
            <div id="checkBoxes">
                <label for="first">
                    <input type="checkbox" id="first" />
                <label for="second">
                    <input type="checkbox" id="second" />
                <label for="third">
                    <input type="checkbox" id="third" />
                <label for="fourth">
                    <input type="checkbox" id="fourth" />
        var show = true;
        function showCheckboxes() {
            var checkboxes = 
            if (show) {
       = "block";
                show = false;
            } else {
       = "none";
                show = true;


Whether you're preparing for your first job interview or aiming to upskill in this ever-evolving tech landscape, GeeksforGeeks Courses are your key to success. We provide top-quality content at affordable prices, all geared towards accelerating your growth in a time-bound manner. Join the millions we've already empowered, and we're here to do the same for you. Don't miss out - check it out now!

Last Updated : 28 May, 2020
Like Article
Save Article
Similar Reads
Complete Tutorials