CODEWITHSUNDEEP
javascriptjqueryhtmlformsfilter
Barlas Apaydin
Barlas Apaydin

Reputation: 7315

How to build a filter module with multiple checkboxes?

I've a form with multiple checkboxes and a list which will be filtered according checked values. I can filter according to one value but when two values check, it won't work properly.

I've shared sample for practice below and here is jsFiddle also.

When you select A and B together and submit form, you will inspect, C is coming also.

$('form').submit(function() {
  $(this).find('input[data-type]').each(function(key,val) {
    if ( val.checked ) {
      // get checked input's data type
      var checkedType = $(this).data('type');

      // hide items which doesn't match with current type
      $('ul').find('li').show().filter(function() {
        return $(this).find('a[data-'+ checkedType +'="true"]').length == 0;
      }).hide();
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<form>
  <label>
    <input data-type="a" type="checkbox" />
    <b>A</b>
  </label>
  <label>
    <input data-type="b" type="checkbox" />
    <b>B</b>
  </label>
  <label>
    <input data-type="c" type="checkbox" />
    <b>C</b>
  </label>
  <input type="submit" value="Filter" />
</form>

<ul>
  <li>
    <a data-a="true" data-b="false" data-c="false">A</a>
  </li>
  <li>
    <a data-a="false" data-b="true" data-c="false">B</a>
  </li>
  <li>
    <a data-a="false" data-b="false" data-c="true">C</a>
  </li>
  <li>
    <a data-a="true" data-b="true" data-c="false">A, B</a>
  </li>
  <li>
    <a data-a="true" data-b="false" data-c="true">A, C</a>
  </li>
  <li>
    <a data-a="false" data-b="true" data-c="true">B, C</a>
  </li>
</ul>

Upvotes: 0

Views: 111

Answers (1)

shaN
shaN

Reputation: 828

after a slight work around i think i got it working

$('form').submit(function() {
  var  checkedType = [];
  $(this).find('input[data-type]').each(function(key,ele) {
    if (ele.checked)      
      checkedType.push($(ele).data('type'));
  });

    $('ul').find('li').show();

    $.each(checkedType, function(i, e){
        $('ul').find('a[data-'+ e + '="false"]').parent("li").hide();
    });

    return false;
});

hope this is what you need


but if you need function for filter, im helpless

Upvotes: 2

Related Questions