How to use multiple checkboxes to return a single div

I am working on a page with multiple checkboxes, and would like it to return a single div based on any combination of checks. I created a jsfiddle, but even though this is the code on my site that somewhat works, it is not working on jsfiddle:

HTML:

<div id="checkboxes">
<input type="checkbox" id="red" name="color">Red
<input type="checkbox" id="blue" name="color">Blue
<input type="checkbox" id="green" name="color">Green
</div>

<br /><br />
<div id="default" style="display:none;">Show this by default</div><br />
<div id="showred" style="display:none;">This is red</div><br />
<div id="showblue" style="display:none;">This is blue</div><br />
<div id="showgreen" style="display:none;">This is green</div><br />
<div id="showpurple" style="display:none;">This is purple</div>

JS:

$(document).ready(function() {
var r = $('#red');
var b = $('#blue');
var g = $('#green');
var p = r.add(b);

$(r).click(function(){
    if ($(r).is(':not(:checked)')) {
        $('#showred').show();
        $('#showblue').hide();
        $('#showgreen').hide();
        $('#showpurple').hide();
        $('#default').hide();
    } else {
        $('#showred').hide();
        $('#showblue').hide();
        $('#showgreen').hide();
        $('#showpurple').hide();
        $('#default').show();
    }
});

$(b).click(function(){
    if ($(b).is(':not(:checked)')) {
        $('#showred').hide();
        $('#showblue').show();
        $('#showgreen').hide();
        $('#showpurple').hide();
        $('#default').hide();
    } else {
        $('#showred').hide();
        $('#showblue').hide();
        $('#showgreen').hide();
        $('#showpurple').hide();
        $('#default').show();
    }
});

$(g).click(function(){
    if ($(g).is(':not(:checked)')) {
        $('#showred').hide();
        $('#showblue').hide();
        $('#showgreen').show();
        $('#showpurple').hide();
        $('#default').hide();
    } else {
        $('#showred').hide();
        $('#showblue').hide();
        $('#showgreen').hide();
        $('#showpurple').hide();
        $('#default').show();
    }
});

$(p).click(function(){
    if ($(r).is(':not(:checked)') && $(b).is(':not(:checked)')) {
        $('#showred').hide();
        $('#showblue').hide();
        $('#showgreen').hide();
        $('#showpurple').show();
        $('#default').hide();
    } else {
        $('#showred').hide();
        $('#showblue').hide();
        $('#showgreen').hide();
        $('#showpurple').hide();
        $('#default').show();
    }
});        
});

http://ift.tt/1GuaECH

I would really appreciate any help to get this working correctly, what I would like to happen is:

• User clicks "Red" -> Display red div


• User clicks "Blue" -> Display blue div


• User clicks "Red" and "Blue" -> Only display purple div (no red or blue)

I would also like to fix the behavior that when a user unchecks a box it reverts back to the default div display, ideally, if no boxes are selected it should show default div, and always display the div based on the combination of checkboxes.

Thank you very much for any help with this.