带有多个筛选器的jQuery结果列表

我试图在一个列表（从数据库生成）上组合一个过滤器，但我感觉我正在走一条复杂的道路。或者更确切地说，我被困住了，不知道该怎么走。到目前为止，我所做的如下所示

过滤器部分：

<div id="searchfilter">
  <form id="filterform" name="form1" method="post" action="">
    <p>Search Filters</p>
    <p>By Area of Expertise</p>
      <ul id="funtion">
        <li>
          <label>
            <span>All areas of expertise</span>
            <input class="resetfilter" type="checkbox" name="cbxFunction" id="cbxFunction_0" value="all" checked="checked" disabled="disabled" />
          </label>
        </li>
        <li>
          <label>
            <span>Administration</span>
            <input class="filter" type="checkbox" name="cbxFunction" id="cbxFunction_1" value="administration" />
          </label>
        </li>
        <li>
          <label>
            <span>Animal Health</span>
            <input class="filter" type="checkbox" name="cbxFunction" id="cbxFunction_2" value="animal-health" />
          </label>
        </li>
        <li>
          <label>
            <span>Creative</span>
            <input class="filter" type="checkbox" name="cbxFunction" id="cbxFunction_3" value="creative" />
          </label>
        </li>
        <li>
          <label>
            <span>Marketing</span>
            <input class="filter" type="checkbox" name="cbxFunction" id="cbxFunction_3" value="marketing" />
          </label>
        </li>
        <li>
          <label>
            <span>Information Technology</span>
            <input class="filter" type="checkbox" name="cbxFunction" id="cbxFunction_3" value="information-technology" />
          </label>
        </li>
        <li>
          <label>
            <span>Research &amp; Development</span>
            <input class="filter" type="checkbox" name="cbxFunction" id="cbxFunction_3" value="research-and-development" />
          </label>
        </li>
      </ul>

      <p>By Location</p>

      <ul id="country">
        <li>
          <label>
            <span>All countries</span>
            <input class="resetfilter" type="checkbox" name="cbxLocation" id="cbxLocation_0" value="all" checked="checked" disabled="disabled" />
          </label>
        </li>
        <li>
          <label>
            <span>Malaysia</span>
            <input class="filter" type="checkbox" name="cbxLocation" id="cbxLocation_1" value="malaysia" />
          </label>
        </li>
        <li>
          <label>
            <span>The Netherlands</span>
            <input class="filter" type="checkbox" name="cbxLocation" id="cbxLocation_1" value="the-netherlands" />
          </label>
        </li>
        <li>
          <label>
            <span>United Kingdom</span>
            <input class="filter" type="checkbox" name="cbxLocation" id="cbxLocation_2" value="united-kingdom" />
          </label>
        </li>
      </ul>
    </form>
  </div>

  <div>
    <h3>Current Vacancies</h3>
    <ul class="pagelink">
      <li class="job-listing function country administration the-netherlands">
        Assistant Regulatory Affairs Manager<br />
        Administration, The Netherlands
      </li>
      <li class="job-listing function country animal-health united-kingdom">
        Clinical Research Associate<br />
        Animal Health, United Kingdom
      </li>
      <li class="job-listing function country creative malaysia">
        Copywriter<br />
        Creative, Malaysia
      </li>
      <li class="job-listing function country administration malaysia">
        Corporate Communications Manager<br />
        Administration, Malaysia
      </li>
      <li class="job-listing function country marketing the-netherlands">
        Customer Service Associate<br />
        Marketing, The Netherlands
      </li>
      <li class="job-listing function country research-and-development the-netherlands">
        Emerging Technology Specialist<br />
        Research &amp; Development, The Netherlands
      </li>
      <li class="job-listing function country information-technology united-kingdom">
        Legal Counsel - Intellectual Property (IP)<br />
        Information Technology, United Kingdom
      </li>
      <li class="job-listing function country information-technology the-netherlands">
        Legal Counsel – Drafting Intelectual Property (IP) Related Agreements<br />
        Information Technology, The Netherlands
      </li>
    </ul>
  </div>

$('.filter').change(function() {
    $filter = $(this).val();
    $filtertype = $(this).parents('ul').attr('id');
    $(this).parents('ul').find('input.resetfilter:checkbox').attr('checked', false);
    $(this).parents('ul').find('input.resetfilter:checkbox').removeAttr("disabled");

    if ($(this).is(':checked')) {
            $('.pagelink').find('li.'+$filter).show();
    }
    else
    {
            $('.pagelink').find('li.'+$filter).hide();
    }
});

$('.resetfilter').change(function() {
    $filtertype = $(this).parents('ul').attr('id');
    if ($(this).is(':checked')) {
            $('.pagelink').find('li.'+$filtertype).show();
            $(this).parents('ul').find('input.filter:checkbox').attr('checked', false);
            $(this).parents('ul').find('input.resetfilter:checkbox').attr('disabled', true);
    }
});

我想在这里完成的是能够从两个过滤器列表中选择任意一个值，并相应地显示结果。特别让我感到困惑的是，如果我选择两个过滤器列表中的一个的“All”值，我不确定如何获得正确的结果来显示，同时仍然将“另一个列表”的活动过滤器考虑在内

我猜我可能需要看看数组，但我不知道在这种情况下该怎么做

---

非常感谢任何指向正确方向的指针

太棒了！非常感谢您快速有效的回复！我仍在试图剖析您所做的工作，但尽管我对jQuery的理解有限，但我开始理解它。不过有一个问题，您的解决方案似乎将所有复选框都视为AND而不是OR？例如，当我选择“管理”和“荷兰”时，我正确地得到1个结果。然而，当我同时选择“Malaysia”时，我应该得到2个结果，但我得到的是0个结果。有没有关于我应该在哪里改变这一点的建议？是的，我现在把他们当作和。请为或尝试以下操作：。然而，如果我们正在做，或者以你为例，选择“管理”和“荷兰”将返回5个结果，因为你说的是“管理”或“荷兰”。嗨，李，为迟来的跟进道歉。所以，你的回答朝着我想要的方向迈出了一大步，谢谢！然而，我一直在试图修改你的脚本，以获得我想要的完整结果，但我再次陷入困境。现在，结果是这样的：国家（…或..或..或..）或地点（…或..或..）。我试图完成的是国家（…或..或..）和地点（…或..或..）。

$('.filter').change(function() {

  // Get all checked filters...
  var $allCheckedFilters = $('input.filter:checked');
  var checkedValues = [];

  // Iterate and build array containing all checked values...
  $allCheckedFilters.each(function(index, element){
    checkedValues.push($(this).val());
  })

  // Build string to use as selector...
  var classNameStr = checkedValues.join('.');    

  // Hide all listings...
  $('.job-listing').hide();

  // Get items with all classnames and show them...
  $('li.' + classNameStr).show();

});

$('.resetfilter').change(function() {
    // Get the parent UL...
    var $parentUl = $(this).parents('ul');

    // Get the checkboxes from the section the checkbox we just checked was in...
    var $thisSectionCheckboxes = $parentUl.find('input.filter');
    if($(this).is(':checked')) {
      // Check all checkboxes in the current section...
      $thisSectionCheckboxes.attr('checked', 'checked');
    }else{
      // User unchecked the All checkbox. So uncheck all checkboxes in this section
      $thisSectionCheckboxes.removeAttr('checked');
    }

    // Let the change handler we added above handle the show and hide of the relevant sections...
    $thisSectionCheckboxes.first().trigger('change');
});