Multiselect Widget

Jquery multiselect with checkboxes

HTML

<select multiple="multiple">
    <option selected>All</option>
    <option selected>Review</option>
    <option selected>Submitted</option>
    <option selected>Delivered</option>
    <option selected>Approved</option>
</select>

CSS

* { font-family: Arial, Helvetica, Sans Serif; }
ul { margin:0; padding:0; }
.multiselect {
	position:relative;
	cursor:pointer;
}

.multiselect-input { 
	border:1px solid #ccc;
	background:#FFF;
	padding:4px 8px;
	display:inline-block;
	vertical-align:middle;
	margin-bottom:10px;
	width:165px;
	white-space:nowrap;
	overflow:hidden;
}

.multiselect-input-text {
	width:110px;
	overflow:hidden;
	white-space: nowrap;
	display: inline-block;
}

.multiselect-input .k-i-arrow-s {
	display: inline-block;
	background-position-x: 0px;
	vertical-align: top;
	margin-top:3px;
}

.multiselect-list {
	position:absolute;
	top:28px;
	left:0;
	border:1px solid #ccc;
	padding:5px;
	background:#fff;
	z-index:9999;
	width:171px;
	font-weight:bold;
	display: none;
}
.multiselect:hover .multiselect-list {
	display: block;
}

.multiselect-list li {
	display:block;
	width:165px;
	padding: 3px;
	cursor: pointer;
}

.multiselect-list li.selected {
	background: #f6f6f6;
}

.multiselect-list li:hover {
	background: #f0f0f0;
}

.multiselect-list li input[type="checkbox"] {
	vertical-align:top;
}

JavaScript

function multiselect() {
    $('select[multiple]').each(function (index, element) {

        var el = $(this);
        //build element
        el.wrap('<div class="multiselect" />');
        el.parent().append('<span class="multiselect-input"><span class="multiselect-input-text">All Selected </span><span class="k-icon k-i-arrow-s"></span></span><div class="multiselect-list"><ul></ul></div>');
        el.hide();

        var list = el.siblings('.multiselect-list').find('ul');

        el.find('option').each(function (i) {
            var $this = $(this),
				parent = this.parentNode,
				description = this.innerHTML,
				title = this.title,
				value = this.value,
				selected = $this.attr('selected');
				
			if ( !selected ) {
				list.append('<li><input type="checkbox" name="checkbox1" value="' + value + '"/> ' + description + '</li>');				
			}
			else {
				list.append('<li class="selected"><input type="checkbox" name="checkbox1" value="' + value + '" checked /> ' + description + '</li>');
			}

        });

        //click events
        $('.multiselect-list li').click(function (event) {
            var _this = $(this),
				value = _this.find(':checkbox').val();

            if ($(':checkbox', this).parents('li').index() == 0) {
                //toggle select all items
                if ($(this).hasClass('selected')) {
                    list.find(':checkbox').prop('checked', false);
                    list.find('li').removeClass('selected');
                    el.find('option').prop('selected', false);
                    console.log('click');
                } else {
                    console.log('check all');
                    list.find(':checkbox').prop('checked', true);
                    list.find('li').addClass('selected');
                    el.find('option').prop('selected', true);
                }
            }
            else {
                //deselect "select-all" if selected
                if...