Filter products with checkbox and data-category

I intent to create a filter by showing and hiding divs with checkbox.

I have seen posts like this, but I have yet to achieve the result I´m expecting. This is a part of the code:

<div class="container">
            <h3 style="font-size:14px; font-weight:normal;">Products by Room</h3>
            <p style="font-size:12px;"><strong>Filter items by room:</strong></p>
            <form>
                <label style="font-size:12px;"><input type="checkbox" name="room" value="office" id="red" /> Office</label><br>
                <label style="font-size:12px;"><input type="checkbox" name="room" value="bedroom" id="yellow" /> Bedroom</label><br>
                <label style="font-size:12px;"><input type="checkbox" name="room" value="living-room" id="pink" /> Living Room</label><br>
                <label style="font-size:12px;"><input type="checkbox" name="room" value="dining-room" id="purple" /> Dining Room</label><br>
                <label style="font-size:12px;"><input type="checkbox" name="room" value="library" id="green" /> Library</label><br>
                <label style="font-size:12px;"><input type="checkbox" name="room" value="hallway" id="other" /> Hallway</label>
            </form>

            <div class="products-by-room">
                <div data-category="office library">Office, Library</div>
                <div data-category="office">Office</div>
                <div data-category="hallway library">Hallway, Library</div>
                <div data-category="living-room dining-room">Living-room & Dining-room</div>
                <div data-category="living-room">Living-room</div>
                <div data-category="bedroom dining-room">Bedroom & Dining-room</div>
                <div data-category="dining room">Dining room</div>
                <div data-category="office">Office</div>
                <div data-category="bedroom">Bedroom</div>
                <div data-category="living-room">Living-room</div>
                <div data-category="living-room dining-room office library">Living-room, Dining-room, Office & Library</div>
                <div data-category="library">Library</div>
                <div data-category="office">Office</div>
                <div data-category="bedroom">Bedroom</div>
            </div>
        </div>

As you can see, in some divs there is only one data-category:

<div data-category="office">Office</div>

but I also have divs with multiple data-categories:

<div data-category="office library">Office & Library</div>

The result I am looking for is when I check the checkbox for "Office" I want it to show all the divs that contains office in the data-category attribute, wether it´s only office or office and other types of rooms.

So, if I selected the checkbox office, I would want to show only the following divs:

<div data-category="office library">Office, Library</div>
<div data-category="office">Office</div>                
<div data-category="living-room dining-room office library">Living-room, Dining-room, Office & Library</div>                
<div data-category="office">Office</div>            

Any tips on how can I achieve this?