JSFiddle - React, Tailwind, and code Playground

by David Thomas

HTML

<table>
    <thead>
        <tr>
            <td>
                <label>
                    <input type="checkbox" class="show" value="north" checked />North</label>
            </td>
        </tr>
        <tr>
            <td>
                <label>
                    <input type="checkbox" class="show" value="south" checked />South
                </label>
            </td>
        </tr>
        <tr>
            <td>
                <label>
                    <input type="checkbox" class="show" value="outOfArea" checked />Out of area
                </label>
            </td>
        </tr>
    </thead>
    <tbody>
        <tr class="north">
            <td>North One</td>
        </tr>
        <tr class="north">
            <td>North Two</td>
        </tr>
        <tr class="outOfArea">
            <td>Out-of-area One</td>
        </tr>
        <tr class="south">
            <td>South One</td>
        </tr>
        <tr class="south">
            <td>South Two</td>
        </tr>
        <tr class="north">
            <td>North Three</td>
        </tr>
        <tr class="north">
            <td>North Four</td>
        </tr>
        <tr class="south">
            <td>South Three</td>
        </tr>
        <tr class="outOfArea">
            <td>Out-of-area Two</td>
        </tr>
    </tbody>
</table>

CSS

.south td {
    background-color: #f00;
}
.north td {
    background-color: #f90;
}
.outOfArea td {
    background-color: #ff0;
}

JavaScript

$('thead input[type=checkbox]').change(function(){
    var self = this;
    $(self).closest('table').find('tbody tr').filter('.' + self.value).toggle(self.checked);
});