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

Filtering list of items with JQuery checkboxes

本文关键字：项目 列表 筛选 复选框 JQuery 使用      更新时间：2023-09-26

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

最初，我希望显示整个结果列表，但随着过滤器的应用，列表会发生变化，然后当过滤器被删除或全部删除时，列表会调整。

我正在使用 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>

有关如何从此处处理它的任何帮助将不胜感激。谢谢。

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

$(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。

我还会在它们之前和之后加上一个;或其他东西来确保您的价值观是不同的，因为例如"钢琴"也会匹配"三角钢琴"，但是";p iano;"不会匹配";三角钢琴;"

$('#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>

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

相关文章：