DropDownCheckBoxList

by DanielD

HTML

<div id="dropdown_checkbox_list">
    <table id="dd_header">
        <tr>
            <td id="message">Custom Message</td>
            <td id="button">\/</td>
        </tr>  
    </table>
    <ul id="dd_options">
        <li class="dd_option">
            <input type="checkbox" id="o1" class="dd_cb"/>
            <label for="o1" class="dd_lbl">Option1</label>
        </li>
        <li class="dd_option">
            <input type="checkbox" id="o2" class="dd_cb"/>
            <label for="o2" class="dd_lbl">Option2-hhhhhhhhhhhhddddddddddddddddddddddddd</label>
        </li>
        <li class="dd_option">
            <input type="checkbox" id="o3" class="dd_cb"/>
            <label for="o3" class="dd_lbl">Option3</label>
        </li>
      
        <li class="dd_footer">
            <input type="button" value="All" id="btnAll"/>
            <input type="button" value="Ok" id="btnOk"/>
             <input type="button" value="Default" id="btnDefault"/>
        </li>
    </ul>
</div>

CSS

#dropdown_checkbox_list{
   display:table;
}

#dropdown_checkbox_list #dd_header{
    border: 2px solid black;
    cursor:pointer;
}
#dropdown_checkbox_list #dd_header #message{
    padding-left: 4px;
    padding-right: 4px;
    text-align:center;
    width:100%;
}
#dropdown_checkbox_list #dd_header #button{
    border-left: 2px solid black;
    padding-left: 2px;
    padding-right: 2px;
}

#dropdown_checkbox_list #dd_options{
    display:none;
    border: 2px solid black;
    border-top:0px;
    padding-left: 2px;
    padding-right: 2px;
    background:#de9a44;
}
#dropdown_checkbox_list #dd_options .dd_option{
}
#dropdown_checkbox_list #dd_options .dd_option .dd_cb{
}
#dropdown_checkbox_list #dd_options .dd_option .dd_lbl{
}
.hover{
    background-color:Silver;
}
.dd_footer{
    display:inline;
}

JavaScript

$(function() {
    var dd_cb_list      = $("#dropdown_checkbox_list");
    var header          = $("#dd_header");
    var header_button   = $("#button");
    var header_message  = $("#message");
    var option_list     = $("#dd_options");
    var option_checkbox = option_list.find("input:checkbox");
  
    if (header.width() < option_list.width()) {
        header.width(option_list.width() + header_button.width() + 2);
    }

    
    header.click(function(event) {
        option_list.slideToggle("fast");
    }).mouseover(function() {
        $(this).addClass("hover");
    }).mouseout(function() {
        $(this).removeClass("hover");
    });

    $("#btnAll").click(function(event) {
        if( option_list.find("input:checked").length ===  option_checkbox.length ){
            option_checkbox.attr('checked', true);
        } else{
            option_checkbox.attr('checked', false);
        }
    });
});