JSFiddle - React, Tailwind, and code Playground

by Steve Forcash

HTML

<h2>Choose a Sport:</h2>        
    <ul class="sport-list">
        <li><input type="checkbox" id="fish" name="sport" value=".fish"><label for="fish">Fly Fishing</label></li>
        <li><input type="checkbox" id="hunt" name="sport" value=".hunt"><label for="hunt">Hunting</label></li>
        <li><input type="checkbox" id="raft" name="sport" value=".raft"><label for="raft">Rafting</label></li>
    </ul>
    <h2>Choose a State:</h2>
    <ul class="state-list">
        <li><input type="checkbox" id="AK" name="state" value=".ak"><label for="AK" class="guide-available">Alaska</label></li>
        <li><input type="checkbox" id="CA" name="state" value=".ca"><label for="CA" class="guide-available">California</label></li>
        <li><input type="checkbox" id="CO" name="state" value=".co"><label for="CO" class="guide-available">Colorado</label></li>
    </ul>
    <h2>Available Guides:</h2>       
    <article class="guide ak fish">
        <h3>Joe's Alaska Fishing Tours</h3>
    </article>
    <article class="guide ak fish hunt">
        <h3>Mike's Alaska Fishing and Hunting Adventures</h3>
    </article>
    <article class="guide co fish raft">
        <h3>Jim's Colorado Rafting and Fishing Lodge</h3>
    </article>
    <article class="guide ca raft">
        <h3>California Whitewater Rafting
    </article>

CSS

ul {
    display:inline-block;
    list-style:none;
}

li {
    float:left;
    margin-left:2em;
    font-family:sans-serif;
}

h2 {
    color:#666;
}

h3 {
    color:#99CC00;
    border:1px #666 solid;
    text-align:center;
}

JavaScript

function filterItems() {
    var state = $(":checkbox:checked").map( function(){ return this.value; }).get();
    var goodClasses = state.join("");
    $(".item").hide().filter(goodClasses).show();
}

filterItems();

$(":checkbox").change(filterItems);