HTML Select Option with Checkbox (Multi Select)

<script>
    var expanded = false;

    function showCheckboxes()
    {
        var checkboxes = document.getElementById("checkboxes");
        if (!expanded)
        {
            checkboxes.style.display = "block";
            expanded = true;
        }
        else
        {
            checkboxes.style.display = "none";
            expanded = false;
        }
    }
    $(document).ready(function()
    {
        $("#checkboxes input[type='checkbox']").click(function()
        {
            alert($(this).val());
            var title = $(this).closest('#checkboxes').find('input[type="checkbox"]').val(),
                title = $(this).val() + ",";
            alert(title);
        });
    });
</script>
<style>
    .multiselect {
        width: 200px;
    }

    .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 #dadada solid;
    }

    #checkboxes label {
        display: block;
    }

    #checkboxes label:hover {
        background-color: #1e90ff;
    }
</style>
<form>
    <div class="multiselect">
        <div class="selectBox" onclick="showCheckboxes()">
            <select>
<option id="drp">Select</option>
</select>
            <div class="overSelect"></div>
        </div>
        <div id="checkboxes">
            <label for="one"><input type="checkbox" id="one"/>First checkbox</label>
            <label for="two"><input type="checkbox" id="two"/>Second checkbox </label>
            <label for="three"><input type="checkbox" id="three" />Third checkbox</label>
        </div>
    </div>
</form>