Filter portfolio with checkboxes

Filter portfolio with checkboxes

Hi all, first post, and I am glad I finally found a forum dedicated entirely to jQuery.

Okay, I am totally new to JQ so bear with me if it sounds stupid. But since I tried googling for 3 days now, I think my problem might not be so simple.

I wish to display a list of people on my website. These people are speakers who have different talents, or features. Male, female, high voice, low voice, german, english, persian, austrian ... a whole bunch of people. And I want to let my user use checkboxes to narrow down the speakers he could use for his production.

Here's the output filtering list (not complete, just rudimentary while I try to make it work)

<div id="filter">
<form>
   <input name="speakerpool" class="checkfilter" type="checkbox" value="male" checked /> male<br>
   <input name="speakerpool" class="checkfilter" type="checkbox" value="female" checked /> female<br>
   <input name="speakerpool" class="checkfilter" type="checkbox" value="german"  checked/> german<br>
   <input name="speakerpool" class="checkfilter" type="checkbox" value="english"  checked/> english<br>
   <input name="speakerpool" class="checkfilter" type="checkbox" value="voice-low" checked /> voice low<br>
   <input name="speakerpool" class="checkfilter" type="checkbox" value="voice-medium" checked /> voice medium<br>
   <input name="speakerpool" class="checkfilter" type="checkbox" value="voice-young" checked /> voice high<br>
   <input type="text" id="txtSavingsTot" value="0" size="50" />
</form>
</div>


This is the actual list that is being displayed, obviously generated from a database:

<div id="portfolio">
   <ul class="portfolio">
      <li class=" german male voice-medium"><a href="#">Person 1</a></li>
      <li class=" german male voice-low"><a href="#">Person 2</a></li>
      <li class=" german voice-young female"><a href="#">Person 3</a></li>
      <li class=" german male voice-medium"><a href="#">Person 4</a></li>
      <li class=" german englisch voice-medium female"><a href="#">Person 5</a></li>
      <li class=" armenian persian voice-medium female"><a href="#">Person 6</a></li>
   </ul>
</div>


And, of course, the jQ code:

<script language="JavaScript" type="text/javascript">
function SpeakerPoolFilter() {        
   var ntot = '';
   $(".checkfilter:checked").each(function () {
      ntot += '.'+$(this).val();
   });
      $("#txtSavingsTot").val(ntot);

   $('div#portfolio li').each(function() {
      if(!$(this).is(ntot)) {
         $(this).fadeTo('normal',0.1);
      } else {
         $(this).fadeTo('slow',1);
      }
   });
}

$(function() {
   $('#filter input').click(SpeakerPoolFilter);
   SpeakerPoolFilter();
});

$(document).ready(SpeakerPoolFilter);
</script>




My problem: I want to start with all checkboxes selected, showing all the people in this speakerpool, then narrow down as checkboxes get unchecked. This works well with combinations such as ".male .voice-low" which effectively removes all females and the other voices, thanks to the help I found here where I learned that is(".class1,.class2") is different to is(".class1.class2")
But, if I say, I want all english speakers, no matter if male or female, and I check male and female, I get none, since there is no speaker that is both male and female. At least not that I know of ;)

Same issue with the voice-levels: most speakers either speak high or low or medium, yet I'd want to be able to check all those and get a comprehensive list, then.

My Question: Is there a way I can separate classes into class-groups or something? Maybe use prefixes like "sex-male, sex-female, language-english, language-german" and jQuery then uses the prefixes to check if they're supposed to be additive (?) or exlusive.

Thank you.