Foundation: using a checkbox to hide/show div

I'm trying to use checkboxes with categories at the top of my page as filters to display the lower content of the page (which gives specific options as buttons under each category). The lowers divs should only be displayed if the checkbox is checked; I set the display as none for the div in the CSS. However, my code doesn't work..

I've tried using different syntax for the JS that I found online, and declaring the js in different places in my HTML, but nothing so far has worked.

HTML

<input type="checkbox" id="supportcheck"> Support

<div class="row" id= "support">
<h5>Support</h5>
<div class="large-6 medium-6 columns">
<div class="callout panel" >
<div role="button" tabindex="0" class="small radius support button">Managed</div>
</div>
</div>

<div class="large-6 medium-6 columns">
<div class="callout panel">
<div role="button" tabindex="0" class="small radius support button">Self-Managed</div>
</div>
</div>
</div>

JavaScript

$('.supportcheck').change(function () {
    if ($(this).attr("checked")) 
    {
        $('.support').fadeIn();
        return;
    }
   $('.support').fadeOut();
});