Checkbox in dropdown

Checkbox in drop-down, but not working with arrow keys

by Rohit Bisht

HTML

<div class="multiselect">
            <div class="selectBox" onclick="show()">
                <select>
                        <option>Select an option</option>
                    </select>
                <div class="overSelect"></div>
            </div>
            <div id="checkboxes">
                <label for="all">
                        <input type="checkbox" id="all" />All</label>
                <label for="one">
                        <input class="rr" name="tt" type="checkbox" id="one" />First checkbox</label>
                <label for="two">
                        <input class="rr" name="tt" type="checkbox" id="two" />Second checkbox</label>
                <label for="three">
                        <input class="rr" name="tt" type="checkbox" id="three" />Third checkbox</label>
                <label for="one1">
                        <input class="rr" name="tt" type="checkbox" id="one1" />First checkbox</label>
                <label for="two1">
                        <input class="rr" name="tt" type="checkbox" id="two1" />Second checkbox</label>
                <label for="three1">
                        <input class="rr" name="tt" type="checkbox" id="three1" />Third checkbox</label>
            </div>
        </div>

CSS

.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;
        }

JavaScript

var expanded = false;
        function show() {
            var checkboxes = document.getElementById("checkboxes");
            if (!expanded) {
                checkboxes.style.display = "block";
                expanded = true;
            } else {
                checkboxes.style.display = "none";
                expanded = false;
            }
        }
        $(document).ready(function() {
            $('#all').on('click', function() {
                var $self = $(this);
                if ($self.is(':checked')) {
                    console.log('checked');
                    //$('.rr').prop("checked", false);
                    $('.rr').prop("checked", true);
                } else {
                    $('.rr').prop("checked", false);
                }
            });
            $('.rr').on('click', function() {
                var $self = $(this);
                if ($self.is(':checked')) {} else {
                    $('#all').prop("checked", false);
                }
                if ($('input[name="tt"]:checked').length === $('input[name="tt"]').length) {
                    //                    if ($('.rr').is(':checked')) {
                    console.log('all');
                    $('#all').prop("checked", true);
                } else {
                    $('#all').prop("checked", false);
                }
            });
        });