1

I need to use multiple filters using data attributes. It's working in combination but not working alone. Here is my code:

<ul>
    <li>
        <div class="sts">
            <h1>filter 1</h1>
            </h1>
            <div class="checkbox">
                <label>
                    <input data-id="1" class="st" type="checkbox" />
                    1
                </label>
            </div>
            <div class="checkbox">
                <label>
                    <input data-id="2" class="st" type="checkbox" />
                    2
                </label>
            </div>
            <div class="checkbox">
                <label>
                    <input data-id="3" class="st" type="checkbox" />
                    3
                </label>
            </div>
        </div>
    </li>
    <li>
        <h1>filter 2</h1>
        <div class="ats">
            <div class="checkbox">
                <label>
                    <input data-id="foo" class="at" type="checkbox" />
                    foo
                </label>
            </div>
            <div class="checkbox">
                <label>
                    <input data-id="boo" class="at" type="checkbox" />
                    boo
                </label>
            </div>
            <div class="checkbox">
                <label>
                    <input data-id="bar" class="at" type="checkbox" />
                    bar
                </label>
            </div>
        </div>
    </li>
    <li>
        <h1>filter 3</h1>
        <div class="dpts">
            <div class="checkbox">
                <label>
                    <input data-id="a" class="dpt" type="checkbox" />
                    a
                </label>
            </div>
            <div class="checkbox">
                <label>
                    <input data-id="b" class="dpt" type="checkbox" />
                    b
                </label>
            </div>
            <div class="checkbox">
                <label>
                    <input data-id="c" class="dpt" type="checkbox" />
                    c
                </label>
            </div>
            <div class="checkbox">
                <label>
                    <input data-id="d" class="dpt" type="checkbox" />
                    d
                </label>
            </div>
        </div>
    </li>
</ul>

<ul class="list">
    <li data-a="foo" data-st="1" data-dpt="a">asdw</li>
    <li data-a="boo" data-st="2" data-dpt="c">qwedf</li>
    <li data-a="boo" data-st="1" data-dpt="a">qwedf</li>
    <li data-a="bar" data-st="3" data-dpt="b">tazxsw</li>
    <li data-a="bar" data-st="1" data-dpt="b">zxcvb</li>
    <li data-a="foo" data-st="1" data-dpt="b">poiuy</li>
    <li data-a="boo" data-st="2" data-dpt="d">lkjhg</li>
    <li data-a="boo" data-st="3" data-dpt="d">lkjhg</li>
</ul>

$(function() {
    $('.at, .dpt,.st').on('click', function() {
        var checkedat = $('.at:checked');
        var checkeddept = $('.dpt:checked');
        var checkedst = $('.st:checked');
        if (checkedat.length || checkeddept.length || checkedst.length) {
            if (checkeddept.length === 0) {
                $('.list > li').hide();
                $.each(checkedat, function() {
                    var prdId = $(this).attr('data-id');
                    $.each(checkedst, function() {
                        var brandId = $(this).attr('data-id');
                        $('.list > li[data-a="' + prdId + '"][data-st="' + brandId + '"]').show();
                    });
                });
            } else if (checkedat.length === 0) {
                $('.list > li').hide();
                $.each(checkedst, function() {
                    var brandId = $(this).attr('data-id');
                    $.each(checkeddept, function() {
                        var DeptId = $(this).attr('data-id');
                        $('.list > li[data-st="' + brandId + '"][data-dpt="' + DeptId + '"]').show();
                    });
                });
            } else if (checkedat.length === 0) {
                $('.list > li').hide();
                $.each(checkeddept, function() {
                    var DeptId = $(this).attr('data-id');
                    $.each(checkedst, function() {
                        var brandId = $(this).attr('data-id');
                        $('.list > li[data-dpt="' + DeptId + '"][data-st="' + brandId + '"]').show();
                    });
                });
            } else {
                $('.list > li').hide();
                $.each(checkedat, function() {
                    var prdId = $(this).attr('data-id');
                    $.each(checkedst, function() {
                        var brandId = $(this).attr('data-id');
                        $.each(checkeddept, function() {
                            var DeptId = $(this).attr('data-id');
                            $('.list > li[data-a="' + prdId + '"][data-dpt="' + DeptId + '"][data-st="' + brandId + '"]').show();
                        });
                    });
                });

            }
        } else {
            $('.list > li').show();
        }
    });
});

Here is a jsFiddle link

If i check any options from filter 1 & filter 2 & filter 3 its working , but when i click any option from filter 1 or filter 2 its not working

Improve this question
2
  • "but a single filter is not working." Which portion of javascript are you referencing? Commented Oct 5, 2016 at 6:58
  • @guest271314 can you pls check the fiddle Commented Oct 5, 2016 at 7:02

1 Answer 1

Reset to default
1

Your logic is a lot more complicated than it needs to be. You should look in to using DRY principles as you can make this much more simple.

First, put a common class on all the checkboxes (I used .stat in my example). Then use a data attribute to denote the type of the stat. From there you can loop through each checked stat and hide/show the related li by using filter() to match them based on the data-stat and data-id. Something like this:

$('.stat').on('click', function() {
  var $stats = $('.stat:checked');
  var $items = $('.list li');

  $items.show();
  if ($stats.length == 0)
    return;

  $stats.each(function() {
    var $stat = $(this);
    $items.filter(function() {
      return $(this).data($stat.data('type')) != $stat.data('id');
    }).hide();
  })
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul>
  <li>
    <div class="sts">
      <h1>filter 1</h1>
      <div class="checkbox">
        <label>
          <input data-id="1" data-type="st" class="stat st" type="checkbox" />1
        </label>
      </div>
      <div class="checkbox">
        <label>
          <input data-id="2" data-type="st" class="stat st" type="checkbox" />2
        </label>
      </div>
      <div class="checkbox">
        <label>
          <input data-id="3" data-type="st" class="stat st" type="checkbox" />3
        </label>
      </div>
    </div>
  </li>
  <li>
    <h1>filter 2</h1>
    <div class="ats">
      <div class="checkbox">
        <label>
          <input data-id="foo" data-type="at" class="stat at" type="checkbox" />foo
        </label>
      </div>
      <div class="checkbox">
        <label>
          <input data-id="boo" data-type="at" class="stat at" type="checkbox" />boo
        </label>
      </div>
      <div class="checkbox">
        <label>
          <input data-id="bar" data-type="at" class="stat at" type="checkbox" />bar
        </label>
      </div>
    </div>
  </li>
  <li>
    <h1>filter 3</h1>
    <div class="dpts">
      <div class="checkbox">
        <label>
          <input data-id="a" data-type="dpt" class="stat dpt" type="checkbox" />a
        </label>
      </div>
      <div class="checkbox">
        <label>
          <input data-id="b" data-type="dpt" class="stat dpt" type="checkbox" />b
        </label>
      </div>
      <div class="checkbox">
        <label>
          <input data-id="c" data-type="dpt" class="stat dpt" type="checkbox" />c
        </label>
      </div>
      <div class="checkbox">
        <label>
          <input data-id="d" data-type="dpt" class="stat dpt" type="checkbox" />d
        </label>
      </div>
    </div>
  </li>
</ul>

<ul class="list">
  <li data-at="foo" data-st="1" data-dpt="a">asdw</li>
  <li data-at="boo" data-st="2" data-dpt="c">qwedf</li>
  <li data-at="boo" data-st="1" data-dpt="a">qwedf</li>
  <li data-at="bar" data-st="3" data-dpt="b">tazxsw</li>
  <li data-at="bar" data-st="1" data-dpt="b">zxcvb</li>
  <li data-at="foo" data-st="1" data-dpt="b">poiuy</li>
  <li data-at="boo" data-st="2" data-dpt="d">lkjhg</li>
  <li data-at="boo" data-st="3" data-dpt="d">lkjhg</li>
</ul>

The above is performing 'AND' logic on each chosen option. To change this to an 'OR', use the below:

$('.stat').on('click', function() {
  var $stats = $('.stat:checked');
  var $items = $('.list li');

  if ($stats.length == 0) {
    $items.show();
    return;
  }

  $items.hide();
  $stats.each(function() {
    var $stat = $(this);
    $items.filter(function() {
      return $(this).data($stat.data('type')) == $stat.data('id');
    }).show();
  })
});
Improve this answer
Sign up to request clarification or add additional context in comments.

4 Comments

thanks but when i select all check box its showing nothing
That's because it's doing a logical 'AND' on each option. I updated the answer to include an 'OR' alternative for you
I need to show all options when all check box selected , how to change it
actually it works but this is not what i expect .. if i choose any 2 check box from same filter it should work as logical OR and if iam selecting from one checkbox from one filter and other check box from another filter it should work as 'AND'

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.