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

我想篩選一些div使用下面的代碼複選框：JS/jQuery的 - 過濾的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/

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

來源

2013-05-02 Godge

嘗試

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

來源

2013-05-02 10:58:39

@Godge檢查附加的演示 – 2013-05-02 11:18:20

謝謝，我仍然希望它顯示所有的div如果沒有複選框被選中。 – Godge 2013-05-02 11:33:57

@Godge查看更新 – 2013-05-02 11:51:54

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

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

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

來源

2013-05-02 10:55:01 thebreiflabb

啊...打我吧， +1 :) – billyonecan 2013-05-02 10:56:58

我應該更好地解釋一下：如果沒有複選框被選中，我希望所有的div都重新出現。你的代碼解決了我最初的問題，但是如果複選框再次被取消選中，它們就不會再出現。有任何想法嗎？ – Godge 2013-05-02 11:05:20

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

回答

相關問題