include/exclude toggle

by rolfsf

HTML

<script src="http://code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<div class="multiselect">
                                        <div class="ms-hd">
                                            <label class="visibly-hidden" for="ms-industry">Industry</label>
                                            <div class="ms-controls incl-excl radio">
                                                <div class="radio-wrap include">
                                                    <input class="custom-radio" id="include" type="radio" name="controls-industry" value="include" checked="checked"/>   
                                                    <label for="include">Include</label>
                                                </div>
                                                
                                                <div class="radio-wrap exclude">
                                                    <input  class="custom-radio" id="exclude" type="radio" name="controls-industry" value="exclude"/>                
                                                    <label for="exclude">Exclude</label>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="ms-bd">
                                            <ul id="ms-industry" class="level-0 include ui-selectable">
                                                <li><div class="ui-selectee">All Industries</div>
                                                    <ul class="level-1"><li><div class="ui-selectee">Agriculture, Forestry, &amp; Fishery</div></li><li><div class="ui-selectee">Arts and Entertainment</div></li><li><div class="ui-selectee ui-selected">Construction</div></li><li><div class="ui-selectee">Educational Services</div></li><li><div class="ui-selectee">Finance and Insurance</div></li><li><div class="ui-selectee">Health Care and Social...

CSS

.multiselect,.niceform .multiselect,.singleselect,.niceform .singleselect{font-size:.85em;background:#FFF;max-width:25em}.multiselect .ms-hd,.niceform .multiselect .ms-hd,.singleselect .ms-hd,.niceform .singleselect .ms-hd{padding:0;min-height:1.4em;border:1px solid #EEE;margin-bottom:1px}.multiselect .ms-hd label,.niceform .multiselect .ms-hd label,.singleselect .ms-hd label,.niceform .singleselect .ms-hd label{display:inline-block;font-weight:bold;color:#333}.multiselect .ms-controls,.niceform .multiselect .ms-controls,.singleselect .ms-controls,.niceform .singleselect .ms-controls{display:block}.multiselect.required label:after,.niceform .multiselect.required label:after,.singleselect.required label:after,.niceform .singleselect.required label:after{content:" *"}.multiselect .ms-bd,.multiselect .content-wrapper.ms-bd,.niceform .multiselect .ms-bd,.niceform .multiselect .content-wrapper.ms-bd,.singleselect .ms-bd,.singleselect .content-wrapper.ms-bd,.niceform .singleselect .ms-bd,.niceform .singleselect .content-wrapper.ms-bd{max-height:350px;overflow-y:auto;border:1px solid #EEE;padding:.25em .5em}.multiselect ul,.niceform .multiselect ul,.singleselect ul,.niceform .singleselect ul{padding:0;margin:0}.multiselect li,.niceform .multiselect li,.singleselect li,.niceform .singleselect li{display:block;margin:0;padding:0;font-size:.96em;line-height:1.4em;background-color:#FFF;border-bottom:1px solid #EEE}.multiselect li:last-child,.niceform .multiselect li:last-child,.singleselect li:last-child,.niceform .singleselect li:last-child{border:none}.multiselect li div,.niceform .multiselect li div,.singleselect li div,.niceform .singleselect li div{margin-bottom:1px;padding:0 16px;padding:0 1rem;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;-webkit-border-radius:3px;-moz-border-radius:3px;-ms-border-radius:3px;border-radius:3px}.multiselect .level-0,.niceform .multiselect .level-0,.singleselect .level-0,.niceform .singleselect...

JavaScript

multiselect('#ms-industry', true, 'controls-industry');


function multiselect(ul,hasControls,controlName, onSelect){ // to do: make controls simpler - if true, generate automatically
    var controls = $(ul).parents('.multiselect').children('.ms-controls');
    $(ul).selectable({
        filter: 'li div',
        selecting: function(event, ui){
          if( $(ui.selecting).parent().parent().hasClass('level-0')){
                //this is a level-0 item, so select all of it's children
                var ch = $(ui.selecting).parent().parent().find('.level-1 .ui-selectee');
                $(ch).not(".ui-selected").addClass("ui-selecting");
            } else if( $(ui.selecting).parent().parent().hasClass('level-1')){
                //this is a level-1 item, so select all of it's children
                var ch = $(ui.selecting).parent().find('.level-2 .ui-selectee');
                $(ch).not(".ui-selected").addClass("ui-selecting");

                var sibs = $(ui.selecting).parent().siblings().find('.ui-selectee');
                var notSelected = 0;
                for (var i=0; i < sibs.length; i++){
                    if( $(sibs[i]).hasClass('ui-selected') || $(sibs[i]).hasClass('ui-selecting') ){
                        notSelected = notSelected;
                    }else{
                        notSelected = notSelected + 1;
                    }
                }
                if(notSelected === 0)   { //all siblings are selected, so select their level-0 parent as well
                    $(ui.selecting).parent().parent().parent().find('>:first-child').not(".ui-selected").addClass("ui-selecting");
                }
            
            }else{
                //this is a level-2 item, so check to see if all of it's siblings are also selected
                var sibs = $(ui.selecting).parent().siblings().find('.ui-selectee');
                var notSelected = 0;
                for (var i=0; i < sibs.length; i++){
                    if(...