title: jQuery results list with multiple filters
body: <p>I am trying to put together a filter on a list (generated from a database), but I'm getting the feeling I'm going down a complicated path. Or rather, I'm stuck and have no idea how to go from here. What I have so far is shown below.</p>
  
  <p><strong>The filter section:</strong></p>
  
  <pre><code>&lt;div id="searchfilter"&gt;
    &lt;form id="filterform" name="form1" method="post" action=""&gt;
      &lt;p&gt;Search Filters&lt;/p&gt;
      &lt;p&gt;By Area of Expertise&lt;/p&gt;
        &lt;ul id="funtion"&gt;
          &lt;li&gt;
            &lt;label&gt;
              &lt;span&gt;All areas of expertise&lt;/span&gt;
              &lt;input class="resetfilter" type="checkbox" name="cbxFunction" id="cbxFunction_0" value="all" checked="checked" disabled="disabled" /&gt;
            &lt;/label&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;label&gt;
              &lt;span&gt;Administration&lt;/span&gt;
              &lt;input class="filter" type="checkbox" name="cbxFunction" id="cbxFunction_1" value="administration" /&gt;
            &lt;/label&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;label&gt;
              &lt;span&gt;Animal Health&lt;/span&gt;
              &lt;input class="filter" type="checkbox" name="cbxFunction" id="cbxFunction_2" value="animal-health" /&gt;
            &lt;/label&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;label&gt;
              &lt;span&gt;Creative&lt;/span&gt;
              &lt;input class="filter" type="checkbox" name="cbxFunction" id="cbxFunction_3" value="creative" /&gt;
            &lt;/label&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;label&gt;
              &lt;span&gt;Marketing&lt;/span&gt;
              &lt;input class="filter" type="checkbox" name="cbxFunction" id="cbxFunction_3" value="marketing" /&gt;
            &lt;/label&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;label&gt;
              &lt;span&gt;Information Technology&lt;/span&gt;
              &lt;input class="filter" type="checkbox" name="cbxFunction" id="cbxFunction_3" value="information-technology" /&gt;
            &lt;/label&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;label&gt;
              &lt;span&gt;Research &amp;amp; Development&lt;/span&gt;
              &lt;input class="filter" type="checkbox" name="cbxFunction" id="cbxFunction_3" value="research-and-development" /&gt;
            &lt;/label&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
  
        &lt;p&gt;By Location&lt;/p&gt;
  
        &lt;ul id="country"&gt;
          &lt;li&gt;
            &lt;label&gt;
              &lt;span&gt;All countries&lt;/span&gt;
              &lt;input class="resetfilter" type="checkbox" name="cbxLocation" id="cbxLocation_0" value="all" checked="checked" disabled="disabled" /&gt;
            &lt;/label&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;label&gt;
              &lt;span&gt;Malaysia&lt;/span&gt;
              &lt;input class="filter" type="checkbox" name="cbxLocation" id="cbxLocation_1" value="malaysia" /&gt;
            &lt;/label&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;label&gt;
              &lt;span&gt;The Netherlands&lt;/span&gt;
              &lt;input class="filter" type="checkbox" name="cbxLocation" id="cbxLocation_1" value="the-netherlands" /&gt;
            &lt;/label&gt;
          &lt;/li&gt;
          &lt;li&gt;
            &lt;label&gt;
              &lt;span&gt;United Kingdom&lt;/span&gt;
              &lt;input class="filter" type="checkbox" name="cbxLocation" id="cbxLocation_2" value="united-kingdom" /&gt;
            &lt;/label&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/form&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p><strong>The results section:</strong></p>
  
  <pre><code>  &lt;div&gt;
      &lt;h3&gt;Current Vacancies&lt;/h3&gt;
      &lt;ul class="pagelink"&gt;
        &lt;li class="job-listing function country administration the-netherlands"&gt;
          Assistant Regulatory Affairs Manager&lt;br /&gt;
          Administration, The Netherlands
        &lt;/li&gt;
        &lt;li class="job-listing function country animal-health united-kingdom"&gt;
          Clinical Research Associate&lt;br /&gt;
          Animal Health, United Kingdom
        &lt;/li&gt;
        &lt;li class="job-listing function country creative malaysia"&gt;
          Copywriter&lt;br /&gt;
          Creative, Malaysia
        &lt;/li&gt;
        &lt;li class="job-listing function country administration malaysia"&gt;
          Corporate Communications Manager&lt;br /&gt;
          Administration, Malaysia
        &lt;/li&gt;
        &lt;li class="job-listing function country marketing the-netherlands"&gt;
          Customer Service Associate&lt;br /&gt;
          Marketing, The Netherlands
        &lt;/li&gt;
        &lt;li class="job-listing function country research-and-development the-netherlands"&gt;
          Emerging Technology Specialist&lt;br /&gt;
          Research &amp;amp; Development, The Netherlands
        &lt;/li&gt;
        &lt;li class="job-listing function country information-technology united-kingdom"&gt;
          Legal Counsel - Intellectual Property (IP)&lt;br /&gt;
          Information Technology, United Kingdom
        &lt;/li&gt;
        &lt;li class="job-listing function country information-technology the-netherlands"&gt;
          Legal Counsel – Drafting Intelectual Property (IP) Related Agreements&lt;br /&gt;
          Information Technology, The Netherlands
        &lt;/li&gt;
      &lt;/ul&gt;
    &lt;/div&gt;
  </code></pre>
  
  <p><strong>Javascript:</strong></p>
  
  <pre><code>$('.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);
      }
  });
  </code></pre>
  
  <p>What I would like to accomplish here is to be able to select any value from either one of the two filter lists and show the results accordingly. Where I am particularly stuck is the part where if I select the "All" value of one of the two filter lists, I'm not sure how to get the right results to show while still keeping the active filters of 'the other list' into consideration.</p>
  
  <p>I'm guessing I may have to look at arrays instead, but I have no idea how to go about it in that case.</p>
  
  <p>Any pointers in the right direction are very much appreciated!</p>