Question

我正在尝试使用页面顶部类别的复选框作为过滤器来显示页面的较低内容（它提供特定选项作为每个类别下的按钮）。只有选中复选框，才会显示较低的div;我将CSS的显示设置为none。但是，我的代码不起作用..

我尝试在网上找到的JS使用不同的语法，并在我的HTML中的不同位置声明js，但到目前为止没有任何工作。

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是一个id而不是一个类。使用

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

将事件处理程序添加到输入。

Answer 2

试试这个：

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

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

基础：使用复选框隐藏/显示div

2 个答案: