使用复选框筛选数据


Using checkboxes to filter data

我有一个MySQL数据库,它使用PHP生成以下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片段有助于过滤结果,但不是按照我希望的方式。结果加载得很好,当选中复选框时,它会得到应该显示得很好的结果。但是,如果取消选中所有复选框,则所有结果都将消失,直到单击某个复选框为止。

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

我该怎么做?

对于第一个问题,用替换$("div.item").hide();

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

对于另一个,在进入每个循环之前,设置一个变量(javascript或jquery)并将其设置为0。从您显示的每个div中获取并添加数据量参数的内容。完成后,您将有一个变量,其中包含