JSFiddle - React, Tailwind, and code Playground

by j08691

HTML

<form class="form">
    <p> Check to hide </p>
    <input type="checkbox" id="1" name="1" class="selector"/><label for="1">A</label>
    <input type="checkbox" id="2" name="2" class="selector"/><label for="2">B</label>
    <input type="checkbox" id="3" name="3" class="selector"/><label for="3">C</label>
</form><br>

<div class="viewing">
    <ul>
        <li class="1">A</li>
        <li class="2">B</li>
        <li class="3">C</li>
        <li class="1 2">AB</li>
        <li class="2 3">BC</li>
        <li class="1 3">AC</li>
        <li class="1 2 3">ABC</li>
    </ul>
</div>

JavaScript

$('form input').on('change', function() {
    $('.viewing li').show();
    $('form input:checked').each(function() {
        var foo = $(this);
        $('.viewing li').filter(":visible").each(function() {
            if ($(this).hasClass(foo.attr('name'))) {
                $(this).hide();
            }
        });
    });
});