Javascript 使用jquery根据多个复选框选择隐藏一些表行

嗨，我有两个这样的表，带有一些用于筛选表的复选框：

<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>

阿拉蒙 苹果 柠檬橙 椰子 苹果 3公斤 28/07/2011 柠檬 5公斤 28/07/2011 椰子 4公斤 28/07/2011 苹果 2公斤 27/04/2011 杏仁 3公斤 27/04/2011 橙色 3公斤 27/04/2011 布鲁内洛迪蒙塔尔西诺酒店 多姿桃 黑比诺和白比诺 设拉子 多姿桃 3 b 28/07/2011 白品乐 5 b。 28/07/2011 设拉子 4 b。 28/07/2011 多姿桃 2 b。 27/04/2011 布鲁内洛迪蒙塔尔西诺酒店 3 b。 27/04/2011 黑比诺 3 b。 27/04/2011 这两个表具有不同的id（杂货店-NA768）和（葡萄酒-NA768），每个复选框都有一个或多个（最大2）值（1；12；），并且每个表都有相应的类编号

我想点击复选框过滤表格。也就是说，当我点击苹果复选框（值14）时，我只想看到表中的苹果（类14），然后如果我点击柑橘（值1；12；）复选框，我将看到苹果（类14）、柠檬（类5）和橙色。如果我取消选中所有复选框，我将看到整个列表。 酒桌也是一样。我在jquery的新站点上找到了如何通过单击复选框来显示或隐藏表行，但与我的需要完全不同

提前谢谢 米歇尔

工作示例：

请参见代码中的注释：

// 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
        }
    });
});

---

@米歇尔：如果这对你有帮助，请将其标记为正确答案，或者至少投赞成票。：）@米歇尔：没关系。欢迎来到stackoverflow:D