複選框+ jQuery的隱藏/顯示

Question

我有一系列的一系列行和複選框來過濾他們：

<ul> 
<li><input id="type-A" type="checkbox" checked="checked"> <a href="/A">A</a></li> 
<li><input id="type-B" type="checkbox" checked="checked"> <a href="/B">B</a></li> 
<li><input id="type-C" type="checkbox" checked="checked"> <a href="/C">C</a></li> 
<li><input id="type-D" type="checkbox" checked="checked"> <a href="/D">D</a></li> 
<li><input id="type-E" type="checkbox" checked="checked"> <a href="/E">E</a></li> 
<li><input id="type-F" type="checkbox" checked="checked"> <a href="/F">F</a></li> 
</ul> 

<table> 
<tr class="A">filler</tr> 
<tr class="B">filler</tr> 
<tr class="A B">filler</tr> 
<tr class="C D">filler</tr> 
<tr class="A F">filler</tr> 
<tr class="A E F">filler</tr> 
<tr class="F">filler</tr> 
<tr class="C D E">filler</tr> 
<tr class="A B C D E F">filler</tr> 
</table> 

我想隱藏基於什麼檢查/顯示行。目前我使用（從這個前面的問題的幫助：Use "this" to simplify code (simple jQuery)）：

$(function(){ 
    $("input[id^='type-']").change(function() { 
    $("."+this.id.replace('type-','')).toggle(this.checked); 
    }).change(); 
}); 

來回切換顯示什麼每次點擊一個框和偉大工程，如果每行只有一個班的時間。但他們沒有。它現在如何設置，點擊順序改變顯示的行。所以我需要創建一個函數來檢查選中的複選框並顯示包含它們的行。我不反對添加按鈕來實現這一點。

我會很感激任何幫助（和資源的方向可以幫助我學習），你們可以給我！

Answer 1

修改函數來獲得一個選擇爲所有選中的複選框。

$(function(){ 
    var $checkboxes = $("input[id^='type-']"); 
    $checkboxes.change(function() { 
    var selector = ''; 
    $checkboxes.filter(':checked').each(function(){ // checked 
     selector += '.' + this.id.replace('type-','') + ', '; 
     // builds a selector like '.A, .B, .C, ' 
    }); 
    selector = selector.substring(0, selector.length - 2); // remove trailing ', ' 
    // tr selector 
    $('table tr').hide() // hide all rows 
     .filter(selector).show(); // reduce set to matched and show 
    }).change(); 
}); 

編輯：看jsfiddle

Answer 2

jQuery爲您創建了這個功能！它被稱爲.filter()，它可以是選擇器字符串，函數，原始DOM元素或jQuery對象。在你的情況下，我會傳遞一個選擇器字符串。我們可以利用jQuery的:has()選擇器，該選擇器接受一個選擇器並返回匹配的元素。所以，如果你想選擇包含選中的複選框中的所有行（li元素），你可以做這樣的：

$("li").filter(":has(input:checked)"); 

或者，我們可以消除我們呼籲filter()，只是整個選擇傳遞給$()：

$("li:has(input:checked)"); 

這將返回包含任何所有li元素選中的複選框的任何地方它的後代中，不只是它的直接孩子。

，並把它在你的.change()處理程序的上下文：

我假設你想顯示具有相同類型包含選中的複選框的li元素tr元素，隱藏任何tr沒有的元素。因此，我們將利用.toggle()功能，切換元素的可見性：

$(function(){ 
    $("input[id^='type-']").change(function() { 
    $("."+this.id.replace('type-','')).toggle(this.checked); 
    // show any tr elements that have the class relating to the type of the inputs that contain checked checkboxes... 
    $("li:has(input:checked)").each(function() { 
     $("tr" + "." + this.id.replace(/type-/, "")).toggle(); 
    }); 
    }).change(); 
}); 

Answer 3

$("table tr").hide(); 
    $("input[id^='type-']").each(function() { 
    element = $(this); 
    $("table tr").each(function() { 
     if($(this).hasClass(element.id.replace('type-','')) { 
     if(element.is(":checked") { 
      element.show(); 
     } 
     } 
    }); 
    }).change();