Jquery Multi select

a simple jquery multi select example

by niki4810

HTML

<div class="multiselect">
    <label><input type="checkbox" name="option[]" value="1" />Green</label>
    <label><input type="checkbox" name="option[]" value="2" />Red</label>
    <label><input type="checkbox" name="option[]" value="3" />Blue</label>
    <label><input type="checkbox" name="option[]" value="4" />Orange</label>
    <label><input type="checkbox" name="option[]" value="5" />Purple</label>
    <label><input type="checkbox" name="option[]" value="6" />Black</label>
    <label><input type="checkbox" name="option[]" value="7" />White</label>
</div>

CSS

.multiselect {
    width:20em;
    height:15em;
    border:solid 1px #c0c0c0;
    overflow:auto;
}
 
.multiselect label {
    display:block;
}
 
.multiselect-on {
    color:#ffffff;
    background-color:#0000ee;
}

JavaScript

jQuery.fn.multiselect = function() {
    $(this).each(function() {
        var checkboxes = $(this).find("input:checkbox");
        checkboxes.each(function() {
            var checkbox = $(this);
            // Highlight pre-selected checkboxes
            if (checkbox.attr("checked"))
                checkbox.parent().addClass("multiselect-on");
 
            // Highlight checkboxes that the user selects
            checkbox.click(function() {
                if (checkbox.attr("checked"))
                    checkbox.parent().addClass("multiselect-on");
                else
                    checkbox.parent().removeClass("multiselect-on");
            });
        });
    });
};


$(".multiselect").multiselect();