隱藏一些錶行根據多個複選框選擇與jquery

Question

您好我有2代表這樣一些複選框濾波器表：

<label><input type="checkbox" name="chk_filter_Grocery_1" id="chk_filter_Grocery_1_1" value="1;">Alamond</label> 
<label><input type="checkbox" name="chk_filter_Grocery_1" id="chk_filter_Grocery_1_2" value="14;">Apple</label> 
<label><input type="checkbox" name="chk_filter_Grocery_1" id="chk_filter_Grocery_1_3" value="5;6;">Lemon & Orange</label> 
<label><input type="checkbox" name="chk_filter_Grocery_1" id="chk_filter_Grocery_1_4" value="17;">Coconut</label> 

<table width="620px" id="Grocery-NA768"> 
    <tbody> 
     <tr class="14"> 
      <td width="185" height="35" align="left">Apple</td> 
      <td width="65" height="35" align="center" valign="middle">3 Kg</td> 
      <td width="80" height="35" align="center" valign="middle">28/07/2011</td> 
     </tr> 
     <tr class="5"> 
      <td height="35" align="left">Lemon</td> 
      <td height="35" align="center" valign="middle">5 Kg</td> 
      <td height="35" align="center" valign="middle">28/07/2011&nbsp;</td> 
     </tr> 
     <tr class="17"> 
      <td height="35" align="left">Coconut</td> 
      <td height="35" align="center" valign="middle">4 Kg</td> 
      <td height="35" align="center" valign="middle">28/07/2011&nbsp;</td> 
     </tr> 
     <tr class="14"> 
      <td height="35" align="left">Apple</td> 
      <td height="35" align="center" valign="middle">2 Kg</td> 
      <td height="35" align="center" valign="middle">27/04/2011&nbsp;</td> 
     </tr> 
     <tr class="1"> 
      <td height="35" align="left">Almond</td> 
      <td height="35" align="center" valign="middle">3 Kg</td> 
      <td height="35" align="center" valign="middle">27/04/2011&nbsp;</td> 
     </tr> 
     <tr class="6"> 
      <td height="35" align="left">Orange</td> 
      <td height="35" align="center" valign="middle">3 kg</td> 
      <td height="35" align="center" valign="middle">27/04/2011&nbsp;</td> 
     </tr> 
    </tbody> 
</table> 

<label><input type="checkbox" name="chk_filter_Wine_1" id="chk_filter_Wine_1_1" value="51;">Brunello di Montalcino</label> 
<label><input type="checkbox" name="chk_filter_Wine_1" id="chk_filter_Wine_1_2" value="4;">Dolcetto</label> 
<label><input type="checkbox" name="chk_filter_Wine_1" id="chk_filter_Wine_1_3" value="35;64;">Pinot noir & Pinot blanc</label> 
<label><input type="checkbox" name="chk_filter_Wine_1" id="chk_filter_Wine_1_4" value="72;">Shiraz </label> 
<table width="620px" id="Wine-NA768"> 
    <tbody> 
     <tr class="4"> 
      <td width="185" height="35" align="left">Dolcetto</td> 
      <td width="65" height="35" align="center" valign="middle">3 b</td> 
      <td width="80" height="35" align="center" valign="middle">28/07/2011</td> 
     </tr> 
     <tr class="35"> 
      <td height="35" align="left">Pinot blanc</td> 
      <td height="35" align="center" valign="middle">5 b.</td> 
      <td height="35" align="center" valign="middle">28/07/2011&nbsp;</td> 
     </tr> 
     <tr class="72"> 
      <td height="35" align="left">Shiraz</td> 
      <td height="35" align="center" valign="middle">4 b.</td> 
      <td height="35" align="center" valign="middle">28/07/2011&nbsp;</td> 
     </tr> 
     <tr class="14"> 
      <td height="35" align="left">Dolcetto</td> 
      <td height="35" align="center" valign="middle">2 b.</td> 
      <td height="35" align="center" valign="middle">27/04/2011&nbsp;</td> 
     </tr> 
     <tr class="51"> 
      <td height="35" align="left">Brunello di Montalcino</td> 
      <td height="35" align="center" valign="middle">3 b.</td> 
      <td height="35" align="center" valign="middle">27/04/2011&nbsp;</td> 
     </tr> 
     <tr class="64"> 
      <td height="35" align="left">Pinot noir</td> 
      <td height="35" align="center" valign="middle">3 b.</td> 
      <td height="35" align="center" valign="middle">27/04/2011&nbsp;</td> 
     </tr> 
    </tbody> 
</table> 

兩個表具有不同的ID（雜貨-NA768）和（ Wine-NA768），每個複選框有一個或多個（最大值2）值（1; 12;），並且每個表格都有相應的數字作爲類別。

我想過濾表格，點擊複選框。即當我點擊蘋果複選框（值14）時，我只想看到表中的蘋果（類14），然後如果我點擊柑橘（值1; 12;）複選框，我會看到蘋果（類14），檸檬（5級）和橙色。如果我取消選中所有複選框，我將看到整個列表。 酒桌同樣的事情。我站點新的jquery，我發現如何顯示或隱藏表格行點擊複選框，但沒有類似於我的需求。

在此先感謝 米歇爾

Answer 1

工作例如：http://jsfiddle.net/petersendidit/6dNKA/3/

參見代碼中的註釋：

// Define some config objects and loop over them to get things set up 
$.each([{ 
    table: $("#Grocery-NA768"), 
    inputs: $("input[name='chk_filter_Grocery_1']") 
},{ 
    table: $("#Wine-NA768"), 
    inputs: $("input[name='chk_filter_Wine_1']") 
}],function(i, obj){ 
    var list = []; 
    obj.inputs.click(function() { 
     var that = $(this), 
      value = that.val().match(/\d+/g), 
      rows = obj.table.find("tr"); 

     // If its checked then add it to the list 
     if (that.prop("checked")) { 
      list = $.merge(list, value); 
     } else { 
      // if its not then remove the items from the list 
      list = $.map(list, function(x) { 
       return ($.inArray(x, value) > -1) ? null : x; 
      }); 
     } 
     // If the list has items 
     if (list.length) { 
      rows.hide() // hide all rows 
       .filter("."+list.join(",.")) // find the ones we care about 
       .show(); // and show them 
     } else { 
      // If no items in the list 
      rows.show(); // show every row 
     } 
    }); 
});