javascript - jQuery 中用于过滤结果的复选框

我正在开发一个产品列表页面，并且非常接近我正在寻找的最终结果。

我在这里创建了一个 fiddle :http://jsfiddle.net/han902th/ (还在下面复制了我的代码)

(顺便说一句，我只是想弄清楚 javascript 函数，其余部分作为示例放在一起，以及一些可以使用的东西，因此代码可能不是最好的。)

基本上，左侧有品牌和产品类型的选项。

从列表中选择品牌或在我的示例中选择证书颁发机构时，这些应被视为“或”选项。因此，选中品牌 1 和品牌 2 的复选框应显示两个品牌的产品(品牌 1 或品牌 2)。

这部分与我所拥有的工作得很好。但是，当选择产品类型时，或者在我的示例中选择 SSL 证书类型时，这些应被视为 AND 选项。这就是我被困住的地方。

因此，在我的示例中，从列表中选择 Comodo 和 Symantec 的选项是可行的，列表会更新为仅显示这些 vendor 的产品。但是，当您从证书类型选项中选择“代码”选项时，列表将显示 Comodo 和 Symantec 的所有产品以及其他 vendor 的代码签名证书，而预期结果是仅显示代码签名证书来自 Comodo 和赛门铁克。

这是我的 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>

最佳答案

尝试分别处理两个过滤器。此外，正如已经提到的，您的类(class)“SAN UCC”应该成为一个单词。

过滤可能会变成这样:

 $('.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()
            });
        }
    });

看看这里:https://jsfiddle.net/han902th/13/

关于javascript - jQuery 中用于过滤结果的复选框，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28428010/

javascript - jQuery 中用于过滤结果的复选框

上一篇：javascript - $ 和 $$ 之间的区别

下一篇：javascript - 如何运行这个jquery