Javascript 隐藏所有div并显示选中了同一类复选框的div

正在尝试构建筛选器。 有一个具有静态项目类和动态生成的项目类的项目列表

<div class="itemswrap">
 <div class="item dynamic1"></div>
 <div class="item dynamic2"></div>
 <div class="item dynamic3"></div>
 <div class="item dynamic2"></div>
</div>

---

而且什么也没有发生…

我认为您希望在任何复选框状态更改时显示/隐藏div。尝试在“更改事件”复选框中包装代码：

$(".filtercheck").on('change', function(){
    $(".lifilter").each(function(){
        var filter1 = $(this).find('.filtercheck').attr('id');
        if ($(this).find('input.filtercheck').attr('checked')) {
            $(".itemswrap .item").hide();
            $('.' + filter1).show();
        }
    });
});

这个怎么样：

function refreshDynamicDivs() {
    $(".filtercheck").each(function() {
        var id = $(this).attr("id");
        if($(this).is(":checked")) {
            $("."+id).show();
        }
        else {
            $("."+id).hide();
        }
    });
}

---

问题在于checked不会返回布尔值，而是使用prop，但在您的情况下，可以使用：checked pseudo并检查结果长度

代码：

---

演示：

什么是.productslistdiv和.inditem类？您不应该在复选框中使用更改事件吗？@wharry在什么情况下要启动过滤器？

$(".filtercheck").on('change', function(){
    $(".lifilter").each(function(){
        var filter1 = $(this).find('.filtercheck').attr('id');
        if ($(this).find('input.filtercheck').attr('checked')) {
            $(".itemswrap .item").hide();
            $('.' + filter1).show();
        }
    });
});

function refreshDynamicDivs() {
    $(".filtercheck").each(function() {
        var id = $(this).attr("id");
        if($(this).is(":checked")) {
            $("."+id).show();
        }
        else {
            $("."+id).hide();
        }
    });
}

$("button").click(function () {
                $(".itemswrap .item").hide();
    $(".lifilter").each(function () {
        var filter1 = $(this).find('.filtercheck').attr('id');
        if ($(this).find('input.filtercheck:checked').length>0) {
            $('.' + filter1).show();
        }
    });
});