基于复选框和下拉列表选择优化列表

我有一个无组织的列表，其中填充了具有多个数据属性的项目。

<ul>
    <li data-category="option1" data-green="t" data-blue="f" data-soft="t">Product 1</li>
    <li data-category="option1,option3" data-green="f" data-blue="t" data-soft="t">Product 2</li>
    <li data-category="option4" data-green="f" data-blue="f" data-soft="f">Product 3</li>
    <li data-category="option5" data-green="f" data-blue="t" data-soft="t">Product 4</li>
    <li data-category="option1" data-green="t" data-blue="f" data-soft="f">Product 5</li>
    <li data-category="option1,option3,option4" data-green="f" data-blue="f" data-soft="t">Product 6</li>
</ul>

我正在尝试根据几个选择标准来完善此列表。这些条件可以通过一个下拉选择和多个真/假复选框来选择。

<div id="refine">
    <select class="category">
        <option value="showall">Show all</option>
        <option value="option1">Option 1</option>
        <option value="option2">Option 2</option>
        <option value="option3">Option 3</option>
        <option value="option4">Option 4</option>
        <option value="option5">Option 5</option>
    </select>
    <input type="checkbox" value="green">Green
    <input type="checkbox" value="blue">blue
    <input type="checkbox" value="soft">soft
</div>

真/假复选框的数量是动态的，因此将来可以添加三个以上的复选框。

此外，一个产品可以在多个类别中提供，如果是这样，数据属性category有多个用逗号分隔的值。

我正在尝试根据顶部的选定选项优化列表。

$('#refine').on('click','input[type="checkbox"]',function(){
    var inputvalue = $(this).val();
    if($(this).is( ":checked" )){
        $('li[data-'+inputvalue+']').each(function(){
            var attributValue = $(this).attr('data-'+inputvalue+'');
            if(attributValue != 't'){
                $(this).hide();
            }
        });
    }
    else{
    //Show all (this still needs to check what other options are still selected)
        $('li[data-'+inputvalue+']').show();
    }
});
$('#refine').on('change','.category', function(){
    var selectedValue = $(this).val();
    $("li[data-category]").each(function(){
        var data_categ = $(this).attr('data-category');
        if (data_categ.indexOf(selectedValue) < 0){
            $(this).hide();
        }else{
            //Show all (this still needs to check what other options are still selected)
            $(this).show();
        }
        if(selectedValue == 'showall'){
            //Show all (this still needs to check what other options are still selected)
            $(this).show();
        }
    });
});

被困在我想显示我刚刚隐藏的部分的部分。当我在下拉列表中选择"全部显示"或取消选中复选框时，所有元素都会再次显示。忽略其他选择选项。

我该如何防止这种情况？

因此，请考虑以下情况：我选择了option 3和soft.我改变了对option 3选择的想法，并将其切换回Show all。现在我想显示所有类别，但只显示那些soft作为数据属性的类别。但是在我的代码中，它再次显示所有列表项，Show all忽略了我仍然soft选择的事实。

选择多个复选框并取消选择一个复选框也是如此。

任何人都可以协助吗？

小提琴