JS/jQuery的 - 過濾的div複選框

Question

我想篩選一些div使用下面的代碼複選框：

$("#filterControls :checkbox").click(function() { 
    $(".sectionContent").hide(); 
    $("#filterControls :checkbox:checked").each(function() { 
    $("." + $(this).val()).show(); 
    }); 
    if($("#filterControls :checkbox").prop('checked') == false){ 
    $(".sectionContent").show(); 
    } 
}); 

這工作得很好，當你選中第一個複選框，但它只與其他過濾器當你也有第一個複選框被選中。這很難解釋，但嘗試JSFiddle：http://jsfiddle.net/BY9JL/

我不希望它依靠有第一個複選框檢查，有沒有辦法解決這個問題？

Answer 1

嘗試

var sections = $('.sectionContent'); 
function updateContentVisibility(){ 
    var checked = $("#filterControls :checkbox:checked"); 
    if(checked.length){ 
     sections.hide(); 
     checked.each(function(){ 
      $("." + $(this).val()).show(); 
     }); 
    } else { 
     sections.show(); 
    } 
} 

$("#filterControls :checkbox").click(updateContentVisibility); 
updateContentVisibility(); 

演示：Fiddle

Answer 2

這是因爲你最後一次檢查，只檢查第一個複選框是否被選中。

你可以改變你最後彷彿看到了塊是否有任何檢查都：

if($("#filterControls :checkbox:checked").length == 0){ 
    $(".sectionContent").show(); 
}