Checkbox Dropdown List

by javajack

HTML

<div id="list-roles-widget" class="editor-field">
    <div id="list-roles-preview">
        Select role types 
    </div>
    <span class="pointer">▼</span>
    <ul id="list-roles">                            
        <li>            
            <input id="chk-Carrier" name="chk_Carrier" type="checkbox" class="chk-role-types" /><label for="chk-Carrier">Carrier</label>
        </li>
        <li>
            <input id="chk-ShipFrom" name="chk_ShipFrom" type="checkbox" class="chk-role-types" /><label for="chk-ShipFrom">Ship From</label>
        </li>
        <li>
            <input id="chk-ShipTo" name="chk_ShipTo" type="checkbox" class="chk-role-types"  /><label for="chk-ShipTo">Ship To</label>
            
        </li>
        <li>
            <input id="chk-Hub" name="chk_Hub" type="checkbox" class="chk-role-types"  /><label for="chk-Hub">Hub</label>
        </li>
        <li>
            <input id="chk-Customer" name="chk_Customer" type="checkbox" class="chk-role-types"  /><label for="chk-Customer">Customer</label>
        </li>
    </ul>
    
</div>

CSS

/*Custom checkbox combo----------------------*/
#list-roles-widget
{
    position:relative;
    overflow:visible;
    float:left;
    z-index:200;    
    font-family:sans-serif;
    font-size:13px;
}
#list-roles-preview
{
    background:#F7F7F7;
    background:-moz-linear-gradient(center top , #ffffff, #f3f3f3) repeat scroll 0 0 transparent;
    background: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f3f3f3));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#f3f3f3');
    padding:5px 5px 3px;
    height:20px;
    width:200px;
    position:relative;
    border:solid 1px #555555;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
    border-radius:3px;
    cursor:pointer;
}
#list-roles-widget .pointer
{
    position:absolute;
    right:5px;
    top:9px;
    font-size:9px;
    cursor:pointer;
}
#list-roles
{
    position:absolute;
    display:none ;
    top:28px;
    width:210px;
    border:solid 1px #555555;
    list-style:none;
    -moz-border-radius:0px 0px 3px 3px;
    -webkit-border-radius:0px 0px 3px 3px;
    border-radius:0px 0px 3px 3px;
    -moz-box-shadow:0px 3px 5px #E6E6E6;
    -webkit-box-shadow:0px 3px 5px #E6E6E6;
    box-shadow:0px 3px 5px #E6E6E6;
}
#list-roles li
{
    border-bottom:solid 1px #dddddd;
    border-top:solid 1px #fff;
    display:block;
    background:#ffffff;
}
#list-roles li:nth-child(odd)
{
    background:#f9f9f9;
}
#list-roles li input
{
    float:left;
    margin:8px 7px 0px 7px;
}
#list-roles li input:checked + label
{
    font-weight:bold;
}
#list-roles li label
{
    display:block;
    cursor:pointer;
    padding:7px 0;
    float: none;
    margin: 0px;
    width:auto;
}

JavaScript

//Custom List of checkboxes for Roles 
$('html').click(function() {
    $("#list-roles").hide();
});

$("#list-roles, #list-roles-preview, #list-roles-widget .pointer").click(function(event) {
    event.stopPropagation();
});

$("#list-roles-preview, #list-roles-widget .pointer").click(function() {
    $("#list-roles").slideToggle('fast');
    updateSelectedRoleTypesCopunt();
});

updateSelectedRoleTypesCopunt();

$(".chk-role-types").click(function() {
    updateSelectedRoleTypesCopunt();
});

function updateSelectedRoleTypesCopunt() {
    var countSelectedRoles = $(".chk-role-types:checked").length;
    if (countSelectedRoles > 0) {
        $("#list-roles-preview").text(countSelectedRoles + " role" + ((countSelectedRoles > 1) ? "s" : "") + " selected");
    } else {
        $("#list-roles-preview").text("Select roles types");
    }
}