JSFiddle - React, Tailwind, and code Playground

by abhiklpm

HTML

<input class="prod_status " rel="status" type="checkbox" value="Discontinued">Discontinued
<br/>
<input class="prod_status" rel="status" type="checkbox" value="Shipping">Shipping
<br/>
<input class="prod_capacity" rel="capacity" type="checkbox" value="1GB">1GB
<br/>
<input class="prod_capacity" rel="capacity" type="checkbox" value="2GB">2GB
<br/>
<input class="prod_capacity" rel="capacity" type="checkbox" value="4GB">4GB
<br/>
<input class="prod_speed" rel="speed" type="checkbox" value="1000MHz">1000MHz
<br/>
<input class="prod_speed" rel="speed" type="checkbox" value="1333MHz">1333MHz
<br/>
<br />
<br />
<table class="someclass" border="0" cellpadding="0" cellspacing="0" summary="bla">
    <caption>bla bla</caption>
    <thead>
        <tr id="ProductID" class="first">
            <th>Product Number</th>
            <th>Status</th>
            <th>Capacity</th>
            <th>Speed</th>
        </tr>
    </thead>
    <tbody>
        <tr id="Memory1" class="part_detail">
            <td class="name">Memory1</td>
            <td class="status" rel="Shipping">Shipping</td>
            <td class="capacity" rel="1GB">1GB</td>
            <td class="speed" rel="1333MHz">1333MHz</td>
        </tr>
        <tr id="Memory2" class="part_detail">
            <td class="name">Memory2</td>
            <td class="status" rel="Discontinued">Discontinued</td>
            <td class="capacity" rel="Shipping">2GB</td>
            <td class="speed" rel="1000MHz">1000MHz</td>
        </tr>
        <tr id="Memory3" class="part_detail">
            <td class="name">Memory3</td>
            <td class="status" rel="Shipping">Shipping</td>
            <td class="capacity" rel="2GB">2GB</td>
            <td class="speed" rel="1333MHz">1333MHz</td>
        </tr>
        <tr id="Memory4" class="part_detail">
            <td class="name">Memory4</td>
            <td class="status" rel="Discontinued">Discontinued</td>
            <td class="capacity" rel="4GB">4GB</td>
            <td...

JavaScript

$("input:checkbox").click(function () {
    var showAll = true;
    $('tr').not('.first').hide();
    $('input[type=checkbox]').each(function () {
        if ($(this)[0].checked) {
            showAll = false;
            var status = $(this).attr('rel');
            var value = $(this).val();            
            $('td.' + status + '[rel="' + value + '"]').parent('tr').show();
        }
    });
    if(showAll){
        $('tr').show();
    }
});