jQuery簡單複選框來隱藏和顯示div（產品過濾）

Question

我正在使用jQuery來過濾頁面上的產品項目（隱藏和顯示DIV）我使用過濾器作爲替換，因爲PHP $ _GET有點舊時尚，重新嘗試通過jQuery來做到這一點。我使用filter（）和data屬性。

如何關閉除現有項目之外的複選框的當前選擇？ 如何隱藏基於選項的項目並取消隱藏？

HTML

<input type="checkbox" id="drama" onClick="filterCategory(this.value)" value="drama" /> Drama<br /> 
<input type="checkbox" id="romance" onClick="filterCategory(this.value)" value="" /> Romance<br /> 
<input type="checkbox" id="horror" onClick="filterCategory(this.value)" value="horror" /> Horror<br /> 

<!---------------------> 
<div class="products"> 
    <div class="productItem" data-price="250" data-category="horror"> 
     Scary Book 
     <div class="productItemPrice"><span>&pound;250</span></div> 
    </div> 
    <div class="productItem" data-price="150" data-category="drama"> 
     Drama Poems 
     <div class="productItemPrice"><span>&pound;150</span></div> 
    </div> 
    <div class="productItem" data-price="250" data-category="romance"> 
     Love Story 
     <div class="productItemPrice"><span>&pound;250</span></div> 
    </div> 
    <div class="productItem" data-price="241" data-category="horror"> 
     Creep Book 
     <div class="productItemPrice"><span>&pound;241</span></div> 
    </div> 
</div> 
<!---------------------> 

jQuery的

function filterCategory(id) { 
    var pid=$(".productItem"); // Which product is it 
    var checkid=$('#'+id); // The name of the checkbox form 
    var cid=$(pid).data("category"); // The value of the checkbox form 
    if ($(checkid).is(':checked')){ 
     $(pid).hide().filter(function() {var catId=$(this).data("category");return catId;}).show(); 
    } else { 
     $(pid).show().filter(function() {var catId=$(this).data("category");return catId;}).show(); 
    } 
} 

CSS

.productItem{float:left;padding:5px;margin:5px;border:1px solid #eaeaea} 
body{font-family:verdana} 

的jsfiddle

http://jsfiddle.net/RyZy8/

Answer 1

你可以嘗試使用這樣的事情，而不是，

首先取消對複選框的onclick屬性 - 使用jQuery的click綁定事件：

// bind to click 
$('input[type="checkbox"]').click(function() { 
    // any checked 
    if ($('input[type="checkbox"]:checked').length > 0) { 
     // hide all 
     $('.products >div').hide(); 
     // loop checked and display relavent div 
     $('input[type="checkbox"]:checked').each(function() { 
      $('.products >div[data-category=' + this.id + ']').show(); 
     }); 
    } else { 
     // none checked - show all 
     $('.products >div').show(); 
    } 
});​ 

Working example here