samedi 28 mai 2016

Checkbox filtering using Jquery

I'm using this code: http://ift.tt/25suGhB to filter categories, however I need the functionality to be slightly different. If more than one filter is checked the item most contain both to be display.

Example:

Checking Category A and B would only display 'AB' not all instances of 'A' and 'B'

HTML:

<ul id="filters">
<li>
    <input type="checkbox" value="categorya" id="filter-categorya" />
    <label for="filter-categorya">Category A</label>
</li>
<li>
    <input type="checkbox" value="categoryb" id="filter-categoryb" />
    <label for="filter-categoryb">Category B</label>
</li>

<div class="item categorya categoryb">A, B</div>
<div class="item categorya">A</div>
<div class="item categorya">A</div>
<div class="item categorya">A</div>
<div class="item categoryb">B</div>
<div class="item categoryb">B</div>
<div class="item categoryb">B</div>

JS:

    $("#filters :checkbox").click(function() {

   var re = new RegExp($("#filters :checkbox:checked").map(function() {
                          return this.value;
                       }).get().join("|") );
   $(".item").each(function() {
      var $this = $(this);
      $this[re.source!="" && re.test($this.attr("class")) ? "show" : "hide"]();
   });
});




Aucun commentaire:

Enregistrer un commentaire