# Tutorial: Filtering Items in a List

**URL:** <https://forum.kirupa.com/t/tutorial-filtering-items-in-a-list/331567>\
**Category:** web dev\
**Created:** [August 31, 2013, 9:56pm UTC](https://forum.kirupa.com/t/tutorial-filtering-items-in-a-list/331567 "2013-08-31T21:56:42Z")\
**Posts on this page:** 5\
**Page:** 1

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [August 31, 2013, 9:56pm UTC](https://forum.kirupa.com/t/tutorial-filtering-items-in-a-list/331567/1 "2013-08-31T21:56:42Z")

</div>

This is happening place to discuss all things related to the [Filtering Items in a List](http://www.kirupa.com/html5/filtering_items_in_a_list.htm) tutorial.

Cheers,  
Kirupa :vamp:

---

<div class="post-metadata">

**Author:** ![web](https://avatars.discourse-cdn.com/v4/letter/w/a8b319/32.png) [@web](https://forum.kirupa.com/u/web)\
**Post date:** [November 5, 2016, 3:50pm UTC](https://forum.kirupa.com/t/tutorial-filtering-items-in-a-list/331567/2 "2016-11-05T15:50:36Z")

</div>

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:

- Food
- Musician
- Food & Musician

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!

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [November 6, 2016, 1:15am UTC](https://forum.kirupa.com/t/tutorial-filtering-items-in-a-list/331567/3 "2016-11-06T01:15:02Z")

</div>

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?

---

<div class="post-metadata">

**Author:** ![web](https://avatars.discourse-cdn.com/v4/letter/w/a8b319/32.png) [@web](https://forum.kirupa.com/u/web)\
**Post date:** [November 6, 2016, 11:32am UTC](https://forum.kirupa.com/t/tutorial-filtering-items-in-a-list/331567/4 "2016-11-06T11:32:25Z")

</div>

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 😉

---

<div class="post-metadata">

**Author:** ![FaucetLove](https://avatars.discourse-cdn.com/v4/letter/f/e495f1/32.png) [@FaucetLove](https://forum.kirupa.com/u/FaucetLove)\
**Post date:** [November 15, 2016, 4:20pm UTC](https://forum.kirupa.com/t/tutorial-filtering-items-in-a-list/331567/5 "2016-11-15T16:20:58Z")

</div>

Thanks for the tutorial 🙂