Multiple Checkboxes Hide Div

by TheFiddler

HTML

<div id="checkboxes">
    <label>Div 1 A</label>
    <input type="checkbox" value="div1" />
    <br>
    <label>Div 1 B</label>
    <input type="checkbox" value="div1" checked="true" />
    <br>
    <label>Div 2</label>
    <input type="checkbox" value="div2" />
    <br>
    <label>Div 3 A</label>
    <input type="checkbox" value="div3" />
    <br>
    <label>Div 3 B</label>
    <input type="checkbox" value="div3" />
    <br>
</div>
<hr>
<div class="div1" style="opacity:0.5;">div 1 with some text</div>
<div class="div1" style="opacity:0.5;">div 1<br>
    <input type="checkbox" />
    <br><input type="checkbox" />
    <br><input type="checkbox" />
    <br>
    </div>
<div class="div2" style="opacity:0.5;">A div 2</div>
<div class="div3" style="opacity:0.5;">div 3</div>
<div class="div3" style="opacity:0.5;">div 3 part B</div>

CSS

label {
    width:60px;
    font-weight: bold;
    display: block;
    float: left;
}
label:after {
    content:": "
}

JavaScript

$(function () {

    $('#checkboxes input:checkbox').change(function () {
        var allvalues = new Array();
        $('#checkboxes input').each(function () {
            allvalues.push($(this).attr('value'));
        });

        var selectedvalues = new Array();

        $('#checkboxes input:checked').each(function () {
            selectedvalues.push($(this).attr('value'));
        });
        //console.log(allvalues);
        //console.log(selectedvalues);

        var resultstohide = [];

        resultstohide = $.grep(allvalues, function (value, i) {
            for (var i = 0; i < selectedvalues.length; i++) {
                if (value == selectedvalues[i]) {
                    return false
                }
            }
            return true;
        });

        //console.log("HIDE " + resultstohide);
        $.each(selectedvalues, function (i, el) {
            var $thediv = $('.' + el);
            var $inputs = $('.' + el + ' :input');
            $($thediv).fadeTo('fast', 1.0);
            //disable inputs
            $($inputs).prop('disabled', false);
        });

        $.each(resultstohide, function (i, el) {
            var $thediv = $('.' + el);
            var $inputs = $('.' + el + ' :input');
            $($thediv).fadeTo('fast', 0.5);
            //disable inputs
            $($inputs).prop('disabled', true);
            
        });
        // $(divs).fadeTo('fast', .5);

    }).change(); //call it on ready to init
});