Combining Checkboxes with Isotope

Here is my Fiddle:

http://ift.tt/2aZf8NA

I'm not worried about styling at this stage just the logic.

The question concerns these:

<div class="filter-buttons">
    <button class="button" data-filter="*">
        <input type="checkbox" id="all" checked>
         <label for="all"> ALL</label>
    </button><br>
    <button class="button" data-filter=".building">
        <input type="checkbox" id="building-checkbox" checked>
        <label for="building-checkbox"> LOCAL AREA</label>
    </button><br>
    <button class="button" data-filter=".local-area">
        <input type="checkbox" id="local-area-checkbox" checked>
        <label for="local-area-checkbox"> BUILDING</label>
    </button>
</div>

As you can see, the checkboxes control what can be seen in the Isotope filter. If the checkbox is checked, then it is displayed and if there is no cross it isn't.

First off I'm trying to remove the "all" check if one category isn't displayed (Because obviously not everything is being shown). Also, if both "Local Area" and "Building" are both attempted to be unchecked then it should default to "All" again i.e. so that it isn't possible for nothing to be displayed at all! I basically require the actual filtering to make sense based on whether the checkboxes are checked or unchecked and the combination of these as well. Sorry it's a little complicated!

(nb: copying my code over to JSFiddle the actual filtering isn't working? But the actual filtering works on my local version, it's just the logic that is wrong hence the above question?!)