複選框在jQuery中過濾結果

我在產品列表的頁面上工作，我非常接近達到我期待的最終結果。複選框在jQuery中過濾結果

我創建了一個小提琴這裏：http://jsfiddle.net/han902th/（也抄我下面的代碼）

（作爲一個方面說明，我只是想弄清楚的JavaScript功能，其餘的放在一起作爲一個例子，所以代碼可能不是最好的。）

基本上，左側有品牌和產品類型的選項。

從列表中選擇一個品牌或在我的示例中是一個證書頒發機構時，這些應視爲OR選項。因此，檢查品牌1和品牌2的框應顯示兩個品牌（品牌1或品牌2）的產品。

這部分工作正常，與我有什麼。但是，在選擇產品類型時，或者在我的示例中使用SSL證書類型時，應將它們視爲AND選項。這是我卡住的地方。

因此，在我的示例中，從列表中選擇Comodo和Symantec的選項，列表更新爲僅顯示來自這些供應商的產品。但是，如果您從證書類型選項中選擇「代碼」選項，那麼當預期結果僅顯示代碼簽名證書時，列表將顯示來自Comodo和Symantec的所有產品以及來自其他供應商的代碼簽名證書來自Comodo和賽門鐵克。

這裏是我的小提琴的內容（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>

來源

2015-02-10 Sherwin Flight

是不是它的工作鰭..？？ – Outlooker 2015-02-10 09:46:19

不，我的問題的最後一段解釋了這個問題。 – 2015-02-10 09:47:36

這會更好，如果你可以拆分成兩個表或至少添加一個類共同的每個部分 – Outlooker 2015-02-10 10:02:10

嘗試。此外，正如已經提到的你的班級「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/

來源

2015-02-10 10:48:01 Danilo

，因爲你似乎擅長這一點，你知道如何修改你的示例顯示一條消息，如果選項選中檢查結果沒有顯示任何項目？如果沒有找到匹配項，就會有消息顯示產品通常在哪裏列出。我非常感謝你已經提供的幫助。謝謝:) – 2015-02-11 11:25:11

根據過濾後可見帖子的數量（如果0 - >顯示，如果不顯示 - >隱藏），您可以切換特殊元素的可見性（例如，顯示消息'Nothing to show'的DIV開始隱藏））：https：//jsfiddle.net/han902th/17/ – Danilo 2015-02-11 11:35:52

你太棒了！非常感謝你:) – 2015-02-11 11:37:22

首先，我編輯「SAN UCC」到「SAN-UCC」，因爲「.SAN UCC」意味着你在.SAN搜索<UCC>節點類對象。我在你的複選框ID和你的文章類中編輯它。

還有就是方式開始：

你拆表項可檢查（有兩個ID「＃表權威性」和「＃表型」），你的數據處理分開
您添加的每個項目一個新的類（<input id="AlphaSSL" type="checkbox" class="authority"/>和<input id="Standard" class="type" type="checkbox"/>）

然後你把這樣的數據（情況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 
}); 
});

來源

2015-02-10 09:52:34 karkael

我實施了您的更改。雖然點擊「類型」選項，但我仍然不確定如何獲得我想要的結果。 – 2015-02-10 10:18:46

我也提出了你的答案，因爲你是第一個指出我的SAN UCC類名需要調整的問題。謝謝！ – 2015-02-10 21:54:06

歡迎光臨;） – karkael 2015-02-11 09:06:15

我真的不知道這是否會對你有幫助。它有一些小小的工作。首先在證書類型部分的所有複選框中添加一個類，如class="certType"。基於這個類，你可以過濾出結果。希望這可能通過單獨處理兩個濾波器給你如何去解決它交配一些輕.. :)

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

小提琴here

來源

2015-02-10 10:19:30 Outlooker

快速瀏覽一下你的小提琴，這看起來像我想要的那樣工作。我會在我的實際頁面上嘗試一下，並將結果返回。 – 2015-02-10 10:21:30

如果它的工作，標記答案爲接受因爲它可能會幫助其他太配偶.. :)乾杯.. – Outlooker 2015-02-10 10:24:46

一個小問題。它非常接近我所需要的，比我原來的要接近。但是，用戶還應該只能檢查「類型」選項，並查看所有「品牌」中的所有類型的項目。任何想法如何實現這一目標？ – 2015-02-10 10:28:24

重建所有的JS代碼：

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

來源

2015-02-10 11:04:54 karkael

複選框在jQuery中過濾結果

回答

相關問題