dropdown with checkbox code example

Example 1: html multi checkbox list

<style>
#checkboxes label{
    display:block;
    padding:5px;
}
</style>
<div id="checkboxes">
    <label for="one"><input type="checkbox" id="one" />First</label>
    <label for="two"> <input type="checkbox" id="two" />Second </label> 
    <label for="three"><input type="checkbox" id="three" />Third </label>
</div>

Example 2: html js make dropdown list checkbox

<body>
  
    <div id="list1" class="dropdown-check-list" tabindex="100">
        <span class="anchor">Select Fruits</span>
        <ul class="items">
            <li><input type="checkbox" />Apple </li>
            <li><input type="checkbox" />Berry </li>
            <li><input type="checkbox" />Mango </li>
            <li><input type="checkbox" />Banana </li>
        </ul>
    </div>

    <script type="text/javascript">
      
        var checkList = document.getElementById('list1');
        checkList.getElementsByClassName('anchor')[0].onclick = function (evt) {
            if (checkList.classList.contains('visible'))
                checkList.classList.remove('visible');
            else
                checkList.classList.add('visible');
        }

        checkList.onblur = function(evt) {
            checkList.classList.remove('visible');
        }
    </script>
</body>

Tags:

Javascript Example

Recent Posts