Фонд: с помощью флажка, чтобы скрыть/показать div

Question

Я пытаюсь использовать флажки с категориями в верхней части моей страницы в качестве фильтров для отображения более низкого содержимого страницы (что дает конкретные опции в качестве кнопок под каждой категорией). Опускание divs должно отображаться только в том случае, если флажок установлен; Я установил отображение как нет для div в CSS. Однако мой код не работает.

Я пробовал использовать другой синтаксис для JS, который я нашел в Интернете, и объявляю js в разных местах моего HTML-кода, но пока ничего не работает.

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(); 
}); 

Answer 1

supportcheck является идентификатор не класс. Использовать

$('#supportcheck').change(function() { 

, чтобы добавить обработчик события на вход.

Answer 2

попробуйте вместо этого:

$('#supportcheck').change(function() { 

    if ($(this).is(':checked')) 
    { 
     $('#support').fadeIn(); 
     return; 
    } 
    $('#support').fadeOut(); 
});