Individual class Attribute visibility using jquery
===

I am trying to have `<li>`s hide and show based on a checkbox selector for individual attributes.   I have noticed however that in my implementation, it looks for the attribute, and performs the task, regardless of all of the other attribute selectors on the form. How can I adjust the code so that it shows the `<li>`s based on visibility selections of the individual class attributes?

[Here is the fiddle][1].

As you can see, if you check the 'A' box, it hides 'A', 'AB', 'AC', and 'ABC'.   However the user thinks that any `<li>` with attributes 'B' and 'C' are visible, and 'AB', 'AC', and 'ABC' are hidden.  

So if the user selects 'A' to be hidden, then the only `<li>` to be hidden is 

'A'

, since it is the only one with just 'A', and 'B' and 'C' are attributes the user wants to be visible, leaving the following visible:

'B', 'C', 'AB', 'AC', 'BC', "ABC'

.   If the user selects 'A' and 'B' to hide, then the following would be hidden: 

'A', 'B', 'AB'

; and visible would be:

'C', 'AC', 'BC', and 'ABC'

, since they have a 'C' class attribute.
I'm assuming I would have to make an array or something similar, and then look for any attributes within the array, and display/hide them accordingly.

  [1]: http://fiddle.jshell.net/chrisfrisina/fZmXH/#base