使用JQuery复选框筛选项目列表

时间：2015-03-09 10:50:03

标签： javascript jquery html checkbox

我有一组两个不同的复选框;价格和类别。

最初，我希望显示整个结果列表，但随后应用过滤器，列表会更改，然后删除过滤器或全部删除过滤器时，列表会进行调整。

我正在使用JQuery过滤结果，但我似乎无法得到它，以便当没有勾选所有产品的复选框时显示，例如，如果没有勾选任何价格，但是仪器一个在类别中，所有的工具都显示出来。它们由<li>标记中的类标记标识，在我的代码中，它是从JSON文件设置的，但在JSFiddle中，我只是放了一些示例测试数据。

我已经创建了一个JSFiddle，但它似乎没有运行，但完全相同的代码在我的笔记本电脑上运行。

这是我的代码：

$(document).ready(function() {
  $("#price :checkbox").click(function() {
    $("li").hide();
    $("#price :checkbox:checked").each(function() {
      $("." + $(this).val()).show();
    });
  });

  $("#category :checkbox").click(function() {
    $("li").hide();
    $("#category :checkbox:checked").each(function() {
      $("." + $(this).val()).show();
    });
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<section id="price">
  <p id="fHeader">Price</p>
  <input type="checkbox" name="price" value="p1" id="p1" />£0 - £5
  <br>
  <input type="checkbox" name="price" value="p2" id="p2" />£5 - £10
  <br>
  <input type="checkbox" name="price" value="p3" id="p3" />£10 - £50
  <br>
  <input type="checkbox" name="price" value="p4" id="p4" />£50 - £100
  <br>
  <input type="checkbox" name="price" value="p5" id="p5" />£100 - £500
  <br>
  <input type="checkbox" name="price" value="p6" id="p6" />£500 - £1000
  <br>
  <input type="checkbox" name="price" value="p7" id="p7" />£1000 +
  <br>
</section>

<section id="category">
  <p id="fHeader">Category</p>
  <input type="checkbox" name="category" value="instruments" id="instruments" />Instruments
  <br>
  <input type="checkbox" name="category" value="sheetmusic" id="sheet-music" />Sheet Music
  <br>
  <input type="checkbox" name="category" value="accessories" id="accessories" />Accessories
  <br>
</section>

<article id="products">
  <ul id="productList">
    <li class="instruments p5 buffet woodwind clarinet">Buffet B12 Clarinet £400</li>
    <li class="instruments p7 yamaha woodwind clarinet">Yamaha Clarinet £1700</li>
    <li class="instruments p6 trevorjames woodwind alto-saxophone">Trevor James Alto Saxophone £700</li>
    <li class="instruments p3 aulos woodwind recorder">Aulos Recorder £16</li>
  </ul>
</article>

如何从这里接近它的任何帮助将不胜感激。感谢。

2 个答案:

答案 0 :(得分：6)

我会使用数据属性而不是类。这意味着您可以将复选框点击分组到一个功能中。见下文：

$(document).ready(function () {

    $('#filters :checkbox').click(function () {
        if ($('input:checkbox:checked').length) {
            $('li').hide();
            $('input:checkbox:checked').each(function () {
                $('li[data-' + $(this).prop('name') + '*="' + $(this).val() + '"]').show();
            });
        } else {
            $("li").show();
        }
    });
    
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<article id="filters">
    <section id="price">
        <p id="fHeader">Price</p>
        <input type="checkbox" name="price" value="p1" id="p1" />£0 - £5
        <br/>
        <input type="checkbox" name="price" value="p2" id="p2" />£5 - £10
        <br/>
        <input type="checkbox" name="price" value="p3" id="p3" />£10 - £50
        <br/>
        <input type="checkbox" name="price" value="p4" id="p4" />£50 - £100
        <br/>
        <input type="checkbox" name="price" value="p5" id="p5" />£100 - £500
        <br/>
        <input type="checkbox" name="price" value="p6" id="p6" />£500 - £1000
        <br/>
        <input type="checkbox" name="price" value="p7" id="p7" />£1000 +
        <br/>
    </section>
    <section id="category">
        <p id="fHeader">Category</p>
        <input type="checkbox" name="category" value="instruments" id="instruments" />Instruments
        <br/>
        <input type="checkbox" name="category" value="sheetmusic" id="sheet-music" />Sheet Music
        <br/>
        <input type="checkbox" name="category" value="accessories" id="accessories" />Accessories
        <br/>
    </section>
</article>
<article id="products">
    <ul id="productList">
        <li data-price="p5" data-category="instruments">Buffet B12 Clarinet £400</li>
        <li data-price="p7" data-category="instruments">Yamaha Clarinet £1700</li>
        <li data-price="p6" data-category="instruments">Trevor James Alto Saxophone £700</li>
        <li data-price="p3" data-category="instruments">Aulos Recorder £16</li>
    </ul>
</article>

我还注意到你有两个id="fHeader"。这很糟糕，真的很糟糕......

编辑正确和/或搜索

这有点复杂。它创建了一个值数组和一个类型数组。然后我们循环遍历每个LI，循环遍历每个类型，循环遍历每个值（循环内循环内的循环，yikes！），其基础是所有类型都需要至少一个正确的值才能显示LI。

我还会通过在它们之前和之后加上;或其他东西来确保你的价值观是不同的，因为例如“钢琴”也会匹配“大钢琴”然而“钢琴”;不会匹配“;大钢琴;”

$('#filters input:checkbox').click(function () {
    if ($('input:checkbox:checked').length) {
        var arrSelected = []; // Create Array of Values
        var arrTypes = []; // Create Array of Types
        $('input:checkbox:checked').each(function () {
            if (arrSelected[$(this).prop('name')] == undefined) {
                arrSelected[$(this).prop('name')] = [];
            }
            arrSelected[$(this).prop('name')].push($(this).val());
            if ($.inArray($(this).prop('name'), arrTypes) < 0) {
                arrTypes.push($(this).prop('name'));
            }
        });
        $('li').each(function() {
            $(this).hide();   
            var intKeyCount = 0;
            for (key in arrTypes) { // AND (check count of matching types)
                var blnFound = false;
                for (val in arrSelected[arrTypes[key]]) { // OR (check one of values matches type)
                    if ($(this).attr('data-' + arrTypes[key]).indexOf(arrSelected[arrTypes[key]][val]) > -1) {                       
                        blnFound = true;
                        break;
                    }
                }
                if (blnFound) {
                    intKeyCount++;
                }
            }
            if (intKeyCount > 0 && intKeyCount != arrTypes.length - 1) {
                $(this).show();   
            }
        });
    } else {
        $("li").show();
    }
});
body {
    font-family:arial;
    font-size:10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<article id="filters">
    <section id="price">
        <p id="fHeader">Price</p>
        <input type="checkbox" name="price" value="p1" id="p1" />£0 - £5
        <br/>
        <input type="checkbox" name="price" value="p2" id="p2" />£5 - £10
        <br/>
        <input type="checkbox" name="price" value="p3" id="p3" />£10 - £50
        <br/>
        <input type="checkbox" name="price" value="p4" id="p4" />£50 - £100
        <br/>
        <input type="checkbox" name="price" value="p5" id="p5" />£100 - £500
        <br/>
        <input type="checkbox" name="price" value="p6" id="p6" />£500 - £1000
        <br/>
        <input type="checkbox" name="price" value="p7" id="p7" />£1000 +
        <br/>
    </section>
    <section id="category">
        <p id="fHeader">Category</p>
        <input type="checkbox" name="category" value="instruments" id="instruments" />Instruments
        <br/>
        <input type="checkbox" name="category" value="sheetmusic" id="sheet-music" />Sheet Music
        <br/>
        <input type="checkbox" name="category" value="accessories" id="accessories" />Accessories
        <br/>
    </section>
</article>
<article id="products">
    <ul id="productList">
        <li data-price="p5" data-category="instruments">Buffet B12 Clarinet £400</li>
        <li data-price="p7" data-category="instruments">Yamaha Clarinet £1700</li>
        <li data-price="p6" data-category="instruments">Trevor James Alto Saxophone £700</li>
        <li data-price="p3" data-category="instruments">Aulos Recorder £16</li>
    </ul>
</article>

答案 1 :(得分：0)

在每个循环显示所有列表项并检查检查了多少个复选框之前，如果值为0则不执行任何操作。

相关问题
最新问题