This is happening place to discuss all things related to the Filtering Items in a List tutorial.
Cheers,
Kirupa :vamp:
Hey Kirupa,
Thank you for this nice example!
Can you or anyone else give an example of how this would work with multiple attributes?
LeeCWilliams posted a screenshot in the comment section below your post, but that didn’t make sense to me.
Let’s say your html is:
I found out that in css you can do the following:
#itemsToFilter li[data-type*=Food] {background-color: green;}
#itemsToFilter li[data-type*=Musician] {background-color: yellow;}
(The asterisk causes one or multiple attributes to be recognised.)
No problems there, so I’m interested in the javascript-part:
How to create 2 checkboxes, displaying 1) Food and 2) Musician…
Where 1) if both checkboxes are checked, food and musicians are displayed;
2) if food is checked and musician is unchecked, the element is still visible, because it contains food, dispite it also contains musician;
3) if musician is checked and food is unchecked, it is also still visible, because it contains musician, dispite it also contains food;
and — 4) if both food and musician are unchecked, the li item disappears.
I want this without having to make a new checkbox called ‘Food Musician’. Which could be done by adding
#itemsToFilter li[data-type*=‘Food Musician’] {background:pink;}
So just working with the checkboxes ‘Food’ and ‘Musician’.
Winning answer gets a bar of chocolate.
Thanks a lot!
That is an interesting (and common) scenario. I’m a bit swamped at the moment to answer it unfortunately. Are you on a deadline for this?
I am actually, but of course I don’t blame you for being busy too. I’ve posted this problem on stackoverflow as well, and I’m trying to tackle the problem myself. I’ll give you an update when I figured it out! Thanks for your reply. I’ll keep you posted 
Thanks for the tutorial 