使用复选框来过滤数据

-1

我有一个使用PHP的MySQL数据库，生成下面的HTML。使用复选框来过滤数据

<div class="item filterable united-states" data-amount="14000"> 
    Supplier Country: United States 
    Delivery Estimation: 5 days 
    Quote Amount: 14000 
<div> 

<div class="item filterable united-states" data-amount="7000"> 
    Supplier Country: United States 
    Delivery Estimation: 30 days 
    Quote Amount: 7000 
<div> 

<div class="item filterable united-kingdom" data-amount="13000"> 
    Supplier Country: United Kingdom 
    Delivery Estimation: 15 days 
    Quote Amount: 13000 
<div> 

<div class="item filterable germany" data-amount="8700"> 
    Supplier Country: Germany 
    Delivery Estimation: 22 days 
    Quote Amount: 8700 
<div>

我还创建了一个循环，根据结果集中的国家创建复选框。造成这种情况的HTML看起来像：

<div class="checkbox check-default" id="country-filter"> 
    <strong>Countries</strong><br> 

    <input type="checkbox" value="germany" id="germany-checkbox" /> 
    <label for="germany-checkbox">Germany</label> 

    <input type="checkbox" value="united-kingdom" id="united-kingdom-checkbox" /> 
    <label for="united-kingdom-checkbox">United Kingdom</label> 

    <input type="checkbox" value="united-states" id="united-states-checkbox" /> 
    <label for="united-states-checkbox">United States</label> 
</div>

所以，我发现了一些jQuery的片段和编辑它来过滤的结果是这样的：

$("#country-filter :checkbox").click(function() { 
$("div.item").hide(); 
$("#country-filter :checkbox:checked").each(function() { 
$("div." + $(this).val()).show().slideDown(400); 
}); 
});

jQuery的片段有助于过滤结果，但不是在我想要的方式。结果加载得很好，当一个复选框被选中时，它得到的结果应该显示得很好。但是，当所有复选框都未选中时，所有结果都会消失，直到单击复选框。

此外，我想要另一个过滤器来处理与国家过滤器协同工作的数量部分。

我该怎么办？

来源

2014-09-23 user3754923

对于第一个问题，更换您的$("div.item").hide();与

if ($("#country-filter :checkbox:checked").length > 0) 
{ 
    $("div.item").hide(); 
} 
else 
{ 
    $("div.item").show(); 
}

其他的，设置一个变量（JavaScript或jQuery的），并将其设置为0，你进入你的每个循环之前。从每个展示的div中抓取并添加数据量参数的内容。一旦你完成了，你将有一个变量，其中总数

来源

2014-09-23 21:06:15

它仍然没有解决问题。当没有选中复选框时，所有结果都将消失。 – user3754923 2014-09-23 22:12:34

我的错误。忘记包括“：检查”。试试这个版本。 – 2014-09-24 13:01:20

这工作很好。你有什么想法如何去关于另一个？ – user3754923 2014-09-24 17:34:50

使用复选框来过滤数据

回答

相关问题