javascript - Filtering list of items with JQuery checkboxes - Stack Overflow

admin管理员组

文章数量:1293503

I have a set of two different checkboxes; price, and category.

Initially, I want the whole list of results to show, but then as filters are applied, the list changes, and then when filters are removed, or all removed, the list adjusts.

I'm using JQuery to filter the results, but I can't seem to get it so that when there are no checkboxes ticked all products show, and for example if none of the price ones are ticked, but the instrument one in category is, all the instruments show. They are identified by the class tag within the <li> tag, which in my code, is set from a JSON file, but in the JSFiddle, I've just put some example test data.

I've created a JSFiddle, but it doesn't seem to be running, but the exact same code runs on my laptop.

Here's my code:

$(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=".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>

I have a set of two different checkboxes; price, and category.

Initially, I want the whole list of results to show, but then as filters are applied, the list changes, and then when filters are removed, or all removed, the list adjusts.

I'm using JQuery to filter the results, but I can't seem to get it so that when there are no checkboxes ticked all products show, and for example if none of the price ones are ticked, but the instrument one in category is, all the instruments show. They are identified by the class tag within the <li> tag, which in my code, is set from a JSON file, but in the JSFiddle, I've just put some example test data.

I've created a JSFiddle, but it doesn't seem to be running, but the exact same code runs on my laptop.

Here's my code:

$(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./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>

Any help as to how to approach it from here would be appreciated. Thanks.

• javascript
• jquery
• html
• checkbox

Share Improve this question Follow edited Jul 7, 2015 at 8:44 Jamie Barker 8,25633 gold badges3131 silver badges6464 bronze badges asked Mar 9, 2015 at 10:50 NavvyNavvy 23744 gold badges99 silver badges2525 bronze badges 2

• 1 Probably because you haven't selected Jquery from the dropdown box on the left in jsfiddle :/ – Andy Commented Mar 9, 2015 at 10:51
• 1 jsfiddle/y1w1rzrL/2 – Murtaza Khursheed Hussain Commented Mar 9, 2015 at 10:52

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 8

I would use data attributes instead of a class. This means you can group your checkbox click into one function. See below:

$(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./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>

I also notice you have two id="fHeader". This is bad, real bad...

---

EDIT FOR CORRECT AND/OR SEARCHING

This is a bit more plex. It creates an array of values and an array of types. We then loop through each LI, to loop through each type, to loop through each value (loop within a loop within a loop, yikes!), with the basis that all types need at least one correct value in order to display the LI.

I would also make sure your values are distinct by putting a ; or something before and after them, because for example "piano" will also match "grand-piano" however ";piano;" will not match ";grand-piano;"

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

Before each loop show all list items and check how many checkboxes are checked, if the value is 0 do nothing.

本文标签： javascriptFiltering list of items with JQuery checkboxesStack Overflow