Question

我有一个包含多个复选框和一个列表的表单，该列表将根据选中的值进行过滤。我可以根据一个值进行过滤，但是当检查两个值时，它将无法正常工作。

我已经分享了以下练习样本和here is jsFiddle also.

当您同时选择 A 和 B 并提交表单时，您将进行检查， C 即将到来。

＆＃13;

$('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();
    }
  });
});

＆＃13;

<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>

＆＃13;

Answer 1

经过一番轻微的工作后，我觉得我已经开始工作了

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

但如果你需要过滤功能，我无助

如何构建具有多个复选框的过滤器模块？

1 个答案: