JSFiddle - React, Tailwind, and code Playground

by Akram kamal

HTML

<ul id="inputList"> 
    <li><input id="type-A" type="checkbox" checked="checked"> <a href="/A">A</a></li>
    <li><input id="type-B" type="checkbox" checked="checked"> <a href="/B">B</a></li>
    <li><input id="type-C" type="checkbox" checked="checked"> <a href="/C">C</a></li>
    <li><input id="type-D" type="checkbox" checked="checked"> <a href="/D">D</a></li>
    <li><input id="type-E" type="checkbox" checked="checked"> <a href="/E">E</a></li>
    <li><input id="type-F" type="checkbox" checked="checked"> <a href="/F">F</a></li>
</ul>

<ul id="list">
    <li class="A">filler</li>
    <li class="B">filler</li>
    <li class="A B">filler</li>
    <li class="C D">filler</li>
    <li class="A F">filler</li>
    <li class="A E F">filler</li>
    <li class="F">filler</li>
    <li class="C D E">filler</li>
    <li class="A B C D E F">filler</li>
</ul>

JavaScript

$(function() {
    var $checkboxes = $("input[id^='type-']");
    $checkboxes.change(function() {
        var selector = '';
        $checkboxes.filter(':checked').each(function() { // checked 
            selector += '.' + this.id.replace('type-', '') + ', ';
            // builds a selector like '.A, .B, .C, ' 
        });
        selector = selector.substring(0, selector.length - 2); // remove trailing ', '
        $('#list li').hide() // hide all rows
        .filter(selector).show(); // reduce set to matched and show
    });
});