Reputation: 2363

Checkboxes to filter results in jQuery

I am working on a page for product listings, and I'm very close to reaching the end result I am looking for.

I created a Fiddle here: http://jsfiddle.net/han902th/ (Have also copied my code below)

(As a side note, I am just trying to figure out the javascript function, the rest was put together as an example, and something to work with, so the code may not be the best.)

Basically, there are options on the left for brand, and product type.

When selecting a brand, or in my example a Certificate Authority, from the list, those should be treated as OR options. So checking the box for brand1 and brand2 should display the products for both brands (brand1 OR brand2).

This part is working fine with what I have. However, when selecting a product type, or in my example a SSL certificate type, these should be treated as AND options. This is where I am stuck.

So in my example, selecting the options for Comodo and Symantec from the list works, the list updates to show only products from those vendors. However, when you then select the option for "Code" from the certificate type options, the list shows all products from Comodo and Symantec, and code signing certs from other vendors as well, when the expected result would be to show only code signing certs from Comodo and Symantec.

Here is the contents of my Fiddle (http://jsfiddle.net/han902th/)

<html>
<head>
<title>Test</title>
<style type="text/css">

.main_price {
color: #000000;
font-family: "trebuchet MS";
font-size: 33px;
line-height: 35px;
padding-bottom: 10px;
text-align: center;
}

article {
background: none repeat scroll 0 0 #fff;
border: 1px solid #928b68;
box-sizing: border-box;
float: left;
margin-bottom: 2%;
margin-right: 2%;
padding-bottom: 0;
width: 300px;   
}

.home_more {
background: none repeat scroll 0 0 #19569d;
text-align: center; 
}

.home_more a {
    color: #fff;
    font-family: "trebuchet MS";
    font-size: 18px;
    line-height: 40px;
}

article .post_img {
    height: 70px;
    margin-bottom: 0;
    padding: 0 0 10px;
    text-align: center;
    width: 100%;
}


article h2.entry-title {
    color: #444444;
    font-size: 14px;
    font-weight: normal;
    height: 43px;
    line-height: 20px;
    margin: 5px 10px 10px;
    overflow: hidden;
}

article .post_img img {
    height: auto;
    margin-bottom: 0;
    width: auto;
}
</style>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
</head>
<body>
<table style="width:100%;">
    <tr>
        <td width='200' valign="top">
                <div class="menu-item">
<table>
    <tr><td><b>Certificate Authority</b></td></tr>
<tr>
<td><label for="AlphaSSL">AlphaSSL</label></td>
<td><input id="AlphaSSL" type="checkbox" /></td>
</tr><tr>
<td><label for="Comodo">Comodo</label></td>
<td><input id="Comodo" type="checkbox" /></td>
</tr><tr>
<td><label for="GeoTrust">GeoTrust</label></td>
<td><input id="GeoTrust" type="checkbox" /></td>
</tr><tr>
<td><label for="GlobalSign">GlobalSign</label></td>
<td><input id="GlobalSign" type="checkbox" /></td>
</tr><tr>
<td><label for="RapidSSL">RapidSSL</label></td>
<td><input id="RapidSSL" type="checkbox" /></td>
</tr><tr>
<td><label for="Symantec">Symantec</label></td>
<td><input id="Symantec" type="checkbox" /></td>
</tr><tr>
<td><label for="Thawte">Thawte</label></td>
<td><input id="Thawte" type="checkbox" /></td>
</tr>
    <tr><td><b>Certificate Type</b></td></tr>
    <tr>
<td><label for="Standard">Standard</label></td>
<td><input id="Standard" type="checkbox" /></td>
</tr><tr>
<td><label for="SAN UCC">SAN UCC</label></td>
<td><input id="SAN UCC" type="checkbox" /></td>
</tr><tr>
<td><label for="OV">OV</label></td>
<td><input id="OV" type="checkbox" /></td>
</tr><tr>
<td><label for="Code">Code</label></td>
<td><input id="Code" type="checkbox" /></td>
</tr><tr>
<td><label for="Wildcard">Wildcard</label></td>
<td><input id="Wildcard" type="checkbox" /></td>
</tr><tr>
<td><label for="EV">EV</label></td>
<td><input id="EV" type="checkbox" /></td>
</tr>

</table>



                    </div>

                </td>     
        <td>

<article class="post AlphaSSL Standard">
    <header class="entry-header">
        <h2 class="entry-title">AlphaSSL Single Domain Certificate</h2>
        <div class="post_img"><img width="100" height="49" alt="AlphaSSL-Site-Seal" src="https://www.ssl2buy.com/wp-content/uploads/2013/02/AlphaSSL-Site-Seal.jpg"></div>
    </header>
    <div class="main_price">$20</div>
    <div>
        <div class="home_more"><a class="more-link" href="https://www.ssl2buy.com/comodo-positive-ssl.php">view | purchase</a></div>
    </div>
</article>


<article class="post AlphaSSL Wildcard">
    <header class="entry-header">
        <h2 class="entry-title">AlphaSSL Wildcard SSL Certificate</h2>
        <div class="post_img"><img width="100" height="49" alt="AlphaSSL-Site-Seal" src="https://www.ssl2buy.com/wp-content/uploads/2013/02/AlphaSSL-Site-Seal.jpg"></div>
    </header>
    <div class="main_price">$70</div>
    <div>
        <div class="home_more"><a class="more-link" href="https://www.ssl2buy.com/comodo-positive-ssl.php">view | purchase</a></div>
    </div>
</article>


<article class="post Comodo Standard">
    <header class="entry-header">
        <h2 class="entry-title">Comodo Positive SSL</h2>
        <div class="post_img"><img width="122" height="79" alt="comodo-site-seal" src="https://www.ssl2buy.com/wp-content/uploads/2013/02/comodo-site-seal.png"></div>
    </header>
    <div class="main_price">$10</div>
    <div>
        <div class="home_more"><a class="more-link" href="https://www.ssl2buy.com/comodo-positive-ssl.php">view | purchase</a></div>
    </div>
</article>


<article class="post Comodo Standard">
    <header class="entry-header">
        <h2 class="entry-title">Comodo Essential SSL</h2>
        <div class="post_img"><img width="122" height="79" alt="comodo-site-seal" src="https://www.ssl2buy.com/wp-content/uploads/2013/02/comodo-site-seal.png"></div>
    </header>
    <div class="main_price">$40</div>
    <div>
        <div class="home_more"><a class="more-link" href="https://www.ssl2buy.com/comodo-positive-ssl.php">view | purchase</a></div>
    </div>
</article>


<article class="post Comodo SAN UCC">
    <header class="entry-header">
        <h2 class="entry-title">Comodo UCC / SAN / Multi-Domain SSL</h2>
        <div class="post_img"><img width="122" height="79" alt="comodo-site-seal" src="https://www.ssl2buy.com/wp-content/uploads/2013/02/comodo-site-seal.png"></div>
    </header>
    <div class="main_price">$60</div>
    <div>
        <div class="home_more"><a class="more-link" href="https://www.ssl2buy.com/comodo-positive-ssl.php">view | purchase</a></div>
    </div>
</article>


<article class="post Comodo OV">
    <header class="entry-header">
        <h2 class="entry-title">Comodo Instant SSL Pro</h2>
        <div class="post_img"><img width="122" height="79" alt="comodo-site-seal" src="https://www.ssl2buy.com/wp-content/uploads/2013/02/comodo-site-seal.png"></div>
    </header>
    <div class="main_price">$60</div>
    <div>
        <div class="home_more"><a class="more-link" href="https://www.ssl2buy.com/comodo-positive-ssl.php">view | purchase</a></div>
    </div>
</article>


<article class="post Comodo Code">
    <header class="entry-header">
        <h2 class="entry-title">Comodo Code Signing Certificate</h2>
        <div class="post_img"><img width="122" height="79" alt="comodo-site-seal" src="https://www.ssl2buy.com/wp-content/uploads/2013/02/comodo-site-seal.png"></div>
    </header>
    <div class="main_price">$99</div>
    <div>
        <div class="home_more"><a class="more-link" href="https://www.ssl2buy.com/comodo-positive-ssl.php">view | purchase</a></div>
    </div>
</article>


<article class="post Comodo Wildcard">
    <header class="entry-header">
        <h2 class="entry-title">Comodo Positive SSL Wildcard</h2>
        <div class="post_img"><img width="122" height="79" alt="comodo-site-seal" src="https://www.ssl2buy.com/wp-content/uploads/2013/02/comodo-site-seal.png"></div>
    </header>
    <div class="main_price">$120</div>
    <div>
        <div class="home_more"><a class="more-link" href="https://www.ssl2buy.com/comodo-positive-ssl.php">view | purchase</a></div>
    </div>
</article>


<article class="post Comodo EV">
    <header class="entry-header">
        <h2 class="entry-title">Comodo EV SSL Single Domain</h2>
        <div class="post_img"><img width="122" height="79" alt="comodo-site-seal" src="https://www.ssl2buy.com/wp-content/uploads/2013/02/comodo-site-seal.png"></div>
    </header>
    <div class="main_price">$140</div>
    <div>
        <div class="home_more"><a class="more-link" href="https://www.ssl2buy.com/comodo-positive-ssl.php">view | purchase</a></div>
    </div>
</article>


<article class="post Comodo Wildcard">
    <header class="entry-header">
        <h2 class="entry-title">Comodo Essential Wildcard SSL</h2>
        <div class="post_img"><img width="122" height="79" alt="comodo-site-seal" src="https://www.ssl2buy.com/wp-content/uploads/2013/02/comodo-site-seal.png"></div>
    </header>
    <div class="main_price">$150</div>
    <div>
        <div class="home_more"><a class="more-link" href="https://www.ssl2buy.com/comodo-positive-ssl.php">view | purchase</a></div>
    </div>
</article>


<article class="post Comodo OV Wildcard">
    <header class="entry-header">
        <h2 class="entry-title">Comodo Premium SSL Wildcard</h2>
        <div class="post_img"><img width="122" height="79" alt="comodo-site-seal" src="https://www.ssl2buy.com/wp-content/uploads/2013/02/comodo-site-seal.png"></div>
    </header>
    <div class="main_price">$400</div>
    <div>
        <div class="home_more"><a class="more-link" href="https://www.ssl2buy.com/comodo-positive-ssl.php">view | purchase</a></div>
    </div>
</article>


<article class="post GeoTrust Standard">
    <header class="entry-header">
        <h2 class="entry-title">GeoTrust QuickSSL Premium</h2>
        <div class="post_img"><img width="115" height="55" alt="smarticon" src="https://www.ssl2buy.com/wp-content/uploads/2013/02/smarticon.gif"></div>
    </header>
    <div class="main_price">$70</div>
    <div>
        <div class="home_more"><a class="more-link" href="https://www.ssl2buy.com/comodo-positive-ssl.php">view | purchase</a></div>
    </div>
</article>


<article class="post GeoTrust OV">
    <header class="entry-header">
        <h2 class="entry-title">GeoTrust True BusinessID SSL</h2>
        <div class="post_img"><img width="109" height="53" alt="geotrust-site-seal" src="https://www.ssl2buy.com/wp-content/uploads/2013/02/geotrust-site-seal.png"></div>
    </header>
    <div class="main_price">$125</div>
    <div>
        <div class="home_more"><a class="more-link" href="https://www.ssl2buy.com/comodo-positive-ssl.php">view | purchase</a></div>
    </div>
</article>


<article class="post GeoTrust EV">
    <header class="entry-header">
        <h2 class="entry-title">GeoTrust True BusinessID EV SSL – Single Domain</h2>
        <div class="post_img"><img width="109" height="53" alt="geotrust-site-seal" src="https://www.ssl2buy.com/wp-content/uploads/2013/02/geotrust-site-seal.png"></div>
    </header>
    <div class="main_price">$200</div>
    <div>
        <div class="home_more"><a class="more-link" href="https://www.ssl2buy.com/comodo-positive-ssl.php">view | purchase</a></div>
    </div>
</article>


<article class="post GeoTrust OV Wildcard">
    <header class="entry-header">
        <h2 class="entry-title">GeoTrust True BusinessID Wildcard SSL</h2>
        <div class="post_img"><img width="109" height="53" alt="geotrust-site-seal" src="https://www.ssl2buy.com/wp-content/uploads/2013/02/geotrust-site-seal.png"></div>
    </header>
    <div class="main_price">$450</div>
    <div>
        <div class="home_more"><a class="more-link" href="https://www.ssl2buy.com/comodo-positive-ssl.php">view | purchase</a></div>
    </div>
</article>


<article class="post GlobalSign Standard">
    <header class="entry-header">
        <h2 class="entry-title">GlobalSign Domain SSL Certificate</h2>
        <div class="post_img"><img width="104" height="53" alt="globalsign-site-seal" src="https://www.ssl2buy.com/wp-content/uploads/2013/02/globalsign-site-seal.png"></div>
    </header>
    <div class="main_price">$125</div>
    <div>
        <div class="home_more"><a class="more-link" href="https://www.ssl2buy.com/comodo-positive-ssl.php">view | purchase</a></div>
    </div>
</article>


<article class="post GlobalSign OV">
    <header class="entry-header">
        <h2 class="entry-title">GlobalSign SSL – Organization Validation</h2>
        <div class="post_img"><img width="104" height="53" alt="globalsign-site-seal" src="https://www.ssl2buy.com/wp-content/uploads/2013/02/globalsign-site-seal.png"></div>
    </header>
    <div class="main_price">$175</div>
    <div>
        <div class="home_more"><a class="more-link" href="https://www.ssl2buy.com/comodo-positive-ssl.php">view | purchase</a></div>
    </div>
</article>


<article class="post GlobalSign Wildcard">
    <header class="entry-header">
        <h2 class="entry-title">GlobalSign Wildcard SSL – Domain Validation</h2>
        <div class="post_img"><img width="104" height="53" alt="globalsign-site-seal" src="https://www.ssl2buy.com/wp-content/uploads/2013/02/globalsign-site-seal.png"></div>
    </header>
    <div class="main_price">$400</div>
    <div>
        <div class="home_more"><a class="more-link" href="https://www.ssl2buy.com/comodo-positive-ssl.php">view | purchase</a></div>
    </div>
</article>


<article class="post GlobalSign EV">
    <header class="entry-header">
        <h2 class="entry-title">GlobalSign EV SSL</h2>
        <div class="post_img"><img width="104" height="53" alt="globalsign-site-seal" src="https://www.ssl2buy.com/wp-content/uploads/2013/02/globalsign-site-seal.png"></div>
    </header>
    <div class="main_price">$498</div>
    <div>
        <div class="home_more"><a class="more-link" href="https://www.ssl2buy.com/comodo-positive-ssl.php">view | purchase</a></div>
    </div>
</article>


<article class="post GlobalSign OV Wildcard">
    <header class="entry-header">
        <h2 class="entry-title">GlobalSign Wildcard SSL – Organization Validation</h2>
        <div class="post_img"><img width="104" height="53" alt="globalsign-site-seal" src="https://www.ssl2buy.com/wp-content/uploads/2013/02/globalsign-site-seal.png"></div>
    </header>
    <div class="main_price">$600</div>
    <div>
        <div class="home_more"><a class="more-link" href="https://www.ssl2buy.com/comodo-positive-ssl.php">view | purchase</a></div>
    </div>
</article>


<article class="post RapidSSL Standard">
    <header class="entry-header">
        <h2 class="entry-title">RapidSSL Single Domain Certificate</h2>
        <div class="post_img"><img width="94" height="53" alt="rapidssl-site-seal" src="https://www.ssl2buy.com/wp-content/uploads/2013/02/rapidssl-site-seal.png"></div>
    </header>
    <div class="main_price">$30</div>
    <div>
        <div class="home_more"><a class="more-link" href="https://www.ssl2buy.com/comodo-positive-ssl.php">view | purchase</a></div>
    </div>
</article>


<article class="post RapidSSL Wildcard">
    <header class="entry-header">
        <h2 class="entry-title">RapidSSL Wildcard Certificate</h2>
        <div class="post_img"><img width="94" height="53" alt="rapidssl-site-seal" src="https://www.ssl2buy.com/wp-content/uploads/2013/02/rapidssl-site-seal.png"></div>
    </header>
    <div class="main_price">$120</div>
    <div>
        <div class="home_more"><a class="more-link" href="https://www.ssl2buy.com/comodo-positive-ssl.php">view | purchase</a></div>
    </div>
</article>


<article class="post Symantec Code">
    <header class="entry-header">
        <h2 class="entry-title">Symantec Code Signing Certificate</h2>
        <div class="post_img"><img width="102" height="53" alt="symantec-site-seal" src="https://www.ssl2buy.com/wp-content/uploads/2013/02/symantec-site-seal.png"></div>
    </header>
    <div class="main_price">$499</div>
    <div>
        <div class="home_more"><a class="more-link" href="https://www.ssl2buy.com/comodo-positive-ssl.php">view | purchase</a></div>
    </div>
</article>


<article class="post Symantec OV">
    <header class="entry-header">
        <h2 class="entry-title">Symantec Secure Site</h2>
        <div class="post_img"><img width="102" height="53" alt="symantec-site-seal" src="https://www.ssl2buy.com/wp-content/uploads/2013/02/symantec-site-seal.png"></div>
    </header>
    <div class="main_price">$299</div>
    <div>
        <div class="home_more"><a class="more-link" href="https://www.ssl2buy.com/comodo-positive-ssl.php">view | purchase</a></div>
    </div>
</article>


<article class="post Symantec OV">
    <header class="entry-header">
        <h2 class="entry-title">Symantec Secure Site Pro</h2>
        <div class="post_img"><img width="102" height="53" alt="symantec-site-seal" src="https://www.ssl2buy.com/wp-content/uploads/2013/02/symantec-site-seal.png"></div>
    </header>
    <div class="main_price">$800</div>
    <div>
        <div class="home_more"><a class="more-link" href="https://www.ssl2buy.com/comodo-positive-ssl.php">view | purchase</a></div>
    </div>
</article>


<article class="post Symantec EV">
    <header class="entry-header">
        <h2 class="entry-title">Symantec Secure Site EV SSL</h2>
        <div class="post_img"><img width="102" height="53" alt="symantec-site-seal" src="https://www.ssl2buy.com/wp-content/uploads/2013/02/symantec-site-seal.png"></div>
    </header>
    <div class="main_price">$800</div>
    <div>
        <div class="home_more"><a class="more-link" href="https://www.ssl2buy.com/comodo-positive-ssl.php">view | purchase</a></div>
    </div>
</article>


<article class="post Symantec EV">
    <header class="entry-header">
        <h2 class="entry-title">Symantec Secure Site Pro EV SSL</h2>
        <div class="post_img"><img width="102" height="53" alt="symantec-site-seal" src="https://www.ssl2buy.com/wp-content/uploads/2013/02/symantec-site-seal.png"></div>
    </header>
    <div class="main_price">$1200</div>
    <div>
        <div class="home_more"><a class="more-link" href="https://www.ssl2buy.com/comodo-positive-ssl.php">view | purchase</a></div>
    </div>
</article>


<article class="post Thawte Standard">
    <header class="entry-header">
        <h2 class="entry-title">Thawte SSL123</h2>
        <div class="post_img"><img width="55" height="53" alt="thawte-site-seal" src="https://www.ssl2buy.com/wp-content/uploads/2013/02/thawte-site-seal.png"></div>
    </header>
    <div class="main_price">$75</div>
    <div>
        <div class="home_more"><a class="more-link" href="https://www.ssl2buy.com/comodo-positive-ssl.php">view | purchase</a></div>
    </div>
</article>


<article class="post Thawte OV">
    <header class="entry-header">
        <h2 class="entry-title">Thawte SSL WebServer</h2>
        <div class="post_img"><img width="55" height="53" alt="thawte-site-seal" src="https://www.ssl2buy.com/wp-content/uploads/2013/02/thawte-site-seal.png"></div>
    </header>
    <div class="main_price">$150</div>
    <div>
        <div class="home_more"><a class="more-link" href="https://www.ssl2buy.com/comodo-positive-ssl.php">view | purchase</a></div>
    </div>
</article>


<article class="post Thawte Code">
    <header class="entry-header">
        <h2 class="entry-title">Thawte Code Sign Certificate</h2>
        <div class="post_img"><img width="55" height="53" alt="thawte-site-seal" src="https://www.ssl2buy.com/wp-content/uploads/2013/02/thawte-site-seal.png"></div>
    </header>
    <div class="main_price">$200</div>
    <div>
        <div class="home_more"><a class="more-link" href="https://www.ssl2buy.com/comodo-positive-ssl.php">view | purchase</a></div>
    </div>
</article>


<article class="post Thawte OV">
    <header class="entry-header">
        <h2 class="entry-title">Thawte SGC SuperCert</h2>
        <div class="post_img"><img width="55" height="53" alt="thawte-site-seal" src="https://www.ssl2buy.com/wp-content/uploads/2013/02/thawte-site-seal.png"></div>
    </header>
    <div class="main_price">$325</div>
    <div>
        <div class="home_more"><a class="more-link" href="https://www.ssl2buy.com/comodo-positive-ssl.php">view | purchase</a></div>
    </div>
</article>


<article class="post Thawte OV Wildcard">
    <header class="entry-header">
        <h2 class="entry-title">Thawte Wildcard SSL</h2>
        <div class="post_img"><img width="55" height="53" alt="thawte-site-seal" src="https://www.ssl2buy.com/wp-content/uploads/2013/02/thawte-site-seal.png"></div>
    </header>
    <div class="main_price">$500</div>
    <div>
        <div class="home_more"><a class="more-link" href="https://www.ssl2buy.com/comodo-positive-ssl.php">view | purchase</a></div>
    </div>
</article>


<article class="post Thawte EV">
    <header class="entry-header">
        <h2 class="entry-title">Thawte EV SSL</h2>
        <div class="post_img"><img width="55" height="53" alt="thawte-site-seal" src="https://www.ssl2buy.com/wp-content/uploads/2013/02/thawte-site-seal.png"></div>
    </header>
    <div class="main_price">$500</div>
    <div>
        <div class="home_more"><a class="more-link" href="https://www.ssl2buy.com/comodo-positive-ssl.php">view | purchase</a></div>
    </div>
</article>

        </td>

            </tr>
        </table>

<script language="javascript">
$(document).ready(function () {
    $('.post').show();

    $('.menu-item').find('input:checkbox').on('click', function () {
        var post = $('.post').hide();

        var elements = $('.menu-item').find('input:checked');

        if(elements.length){
            elements.each(function () {
                post.filter('.' + this.id).show();
            });
        }
        else
            post.show();
    });
});
</script>
</body>
</html>

Upvotes: 0

Answers (4)

karkael

Reputation: 473

Rebuild all your JS code:

$(document).ready(function () {
$('.post').show();

window.certificate = { 
    "auth": [], 
    "type": [] 
};

$('.menu-item table#table-auth input').on('click', function (){
    if( this.checked ) window.certificate.auth.push( this.id );
    else {
        var temp = [];
        for( var a in window.certificate.auth )
            if( window.certificate.auth[ a ] !== this.id )
                temp.push( window.certificate.auth[ a ] );
        window.certificate.auth = temp;
    }
    refreshList( window.certificate );
});

$('.menu-item table#table-type input').on('click', function (){
    if( this.checked ) window.certificate.type.push( this.id );
    else {
        var temp = [];
        for( var t in window.certificate.type ){
            if( window.certificate.type[ t ] !== this.id ){
                temp.push( window.certificate.type[ t ] );
            }
        }
        window.certificate.type = temp;
    }
    refreshList( window.certificate );
});

refreshList = function( cert ){
    var post = $( ".post" ).hide();
    var mixlist = [];
    var temp;
    if( cert.auth.length ){
        for( var a in cert.auth ){
            temp = "." + cert.auth[ a ];
            temp += cert.type.length && ( "." + cert.type.join( "." ) ) || "";
            mixlist.push( temp );
        }
    }
    else{
        if( cert.type.length )
            mixlist.push( "." + cert.type.join( "." ) );
    }

    if( mixlist.length ){
        for( var m in mixlist )
            post.filter( mixlist[ m ] ).show();
    }
    else
        post.show();
}
});

Upvotes: 0

Danilo

Reputation: 2686

Try by treating the two filters separately. Moreover as already mentioned your class "SAN UCC" should become one word.

The filtering may become something like this:

 $('.authorities, .types').on('click', function () {
        //Start with all hidden
        var post = $('article.post').hide();

        // Filter by Authority
        var a = $(".authorities").filter(':checked');
        if (a.length) {
            a.each(function () {
                $('.post').filter("." + this.id).show()
            });
        } else post.show();


        //Filter by Certificate type
        var t = $(".types").filter(':checked');
        if (t.length) {
            var tn = $(".types").filter(':not(:checked)');
            tn.each(function () {
                $('.post').filter(":visible").filter("." + this.id).hide()
            });
        }
    });

have a look here: https://jsfiddle.net/han902th/13/

Upvotes: 2

Nibin

Reputation: 3960

I really don't know if this might help u .Its a slight work around.First add a class say class="certType" to all the check boxes under the Certificate Type section.Based on this class you may filter out the results.Hope this might give you some light on how to solve it mate.. :)

if($(this).attr("class") == "certType"){
    $('.post:visible').filter(':not(.' + this.id + ')').hide();
 }

Fiddle here

Upvotes: 1

karkael

Reputation: 473

First I edit "SAN UCC" to "SAN-UCC", because ".SAN UCC" mean you search a <UCC> node in a .SAN class-object. I edited it in your checkbox id and in your article class.

There is to way to start :

You split the table item checkable ( with two id "#table-auth" and "#table-type" ) and you treat with data separately
You add for each item a new class ( <input id="AlphaSSL" type="checkbox" class="authority"/> and <input id="Standard" class="type" type="checkbox"/> )

Then you treat data like that (case 1):

$(document).ready(function () {
$('.post').show();

$('.menu-item table#table-auth').find('input:checkbox').on('click', function () {
    var post = $('.post').hide();

    var elements = $('.menu-item').find('input:checked');

    if(elements.length){
        elements.each(function () {
            post.filter('.' + this.id).show();
        });
    }
    else
        post.show();
});

$('.menu-item table#table-type').find('input:checkbox').on('click', function () {
    // treat data
});
});

Upvotes: 1

Checkboxes to filter results in jQuery

Answers (4)

Related Questions