Question

I am trying to have <li>s hide and show based on their class names (most of which are multiple classes) selected by the user using 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.

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.

Answer 1

Here’s a way to do it with a bit less code:

http://fiddle.jshell.net/vnjHn/1/

$('form input').on('change', function() {

    var notSelectedList = $('form input:not(:checked)').map(function() {
        return '.' + $(this).attr('name');
    }).get().join(',');

    $('.viewing li').each(function() {
        $(this).toggle($(this).is(notSelectedList));
    });

});​

It works by building up a comma separated list of the classes which are not to be hidden, an then checks all the list items for any of these classes – which is a slightly easier way of doing the check I think.