堆棧內存溢出
  簡體   English   中英

復選框以在jQuery中過濾結果

[英]Checkboxes to filter results in jQuery

 原文  2015-02-10 09:22:04  7   4    javascript/ jquery

問題描述

我正在制作一個產品列表頁面，並且非常接近達到想要的最終結果。

我在這里創建了一個提琴： http : //jsfiddle.net/han902th/ （也在下面復制了我的代碼）

（作為一個旁注，我只是想弄清楚javascript函數，其余的都作為示例，並進行了一些處理，因此代碼可能不是最好的。）

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

從列表中選擇品牌或本例中的證書頒發機構時，應將其視為“或”選項。 因此，選中brand1和brand2框應顯示兩個品牌（brand1或brand2）的產品。

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

因此，在我的示例中，從列表中選擇Comodo和Symantec的選項有效，該列表將更新為僅顯示那些供應商的產品。 但是，當您隨后從證書類型選項中選擇“代碼”選項時，列表將顯示來自Comodo和Symantec的所有產品，以及其他供應商的代碼簽名證書，而預期的結果是僅顯示代碼簽名證書。來自Comodo和Symantec。

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

4 個解決方案

解決方案1
 2 已采納  2015-02-10 10:48:01

嘗試分別處理兩個過濾器。 此外，如前所述，您的“ 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/

解決方案2
 1  2015-02-10 09:52:34

首先，我將“ SAN UCC”編輯為“ SAN-UCC”，因為“ .SAN UCC”表示您在.SAN類對象中搜索<UCC>節點。 我在您的復選框ID和文章類中對其進行了編輯。

有一種開始的方法：

  • 您將表項拆分為checkable（兩個ID為“＃table-auth”和“＃table-type”），然后分別處理數據
  • 您為每個項目添加一個新類（ <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
});
});

解決方案3
 1  2015-02-10 10:19:30

我真的不知道這是否對您有幫助。它可以解決一些問題。 class="certType"在“證書類型”部分下的所有復選框中添加一個類class="certType" 。基於此類，您可以過濾出結果。希望這可以給您一些有關如何解決它的方法.. :) 

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

在這里擺弄

解決方案4
 0  2015-02-10 11:04:54

重建所有的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();
}
});

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 使用復選框篩選結果 使用jQuery顯示結果的復選框 使用jQuery過濾JSON結果 如何使用JQuery 2.1.4篩選復選框？ 用於顯示/隱藏元素的 JQuery 過濾器復選框 使用復選框過濾w。 jQuery的 jQuery通過多個復選框過濾表行 產品過濾器 - 根據選中/取消選中的多個復選框顯示結果 jQuery篩選器顯示不穩定結果 使用 jQuery/AJAX 過濾來自 JSON 數據的復選框的結果
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM