Javascript 基于多个CSS类和多个复选框的输入显示/隐藏tr元素

我有一个包含各种表格的大型HTML页面。我想在页面顶部创建一组复选框，用于过滤各个表中的值。

表中的值可以属于多个组，其中一个组由唯一的CSS类表示。这里是棘手的部分，当选择一个组时，必须显示所有用相应CSS类标记的值。
例如，如果选择A组，则应显示标有A类的所有值

以下是表示我的显示结构的代码段：

<input type="checkbox" name="A" value="A">
<input type="checkbox" name="B" value="B">

<tr id="abc" class="stylingClass A">
<tr id="def" class="stylingClass B">
<tr id="ghj" class="stylingClass A B">



我知道如何根据复选框隐藏一个或另一个
元素，但我不知道如何在仅选择A或仅选择B时显示元素
#ghj
。最后，我希望它可以扩展到N个组。我知道这是一项艰巨的任务，但我真的被卡住了。
试试看

jQuery(function ($) {
    var $ins = $('input[type="checkbox"]'),
        $trs = $('tr.stylingClass');

    //change handler for checkboxes
    $ins.change(function () {
        //get the value of all checked checkboxes
        var vals = $ins.filter(':checked').map(function () {
            return this.value;
        }).get();
        //hide all trs
        $trs.hide();
        //if there is at least one checked item
        if (vals.length) {
            //show the trs with the any one of the selected value as class
            $trs.filter('.' + vals.join(', .')).show();
        }
    })
})

演示：
这同样适用于：

$(document).ready(function(){
  $('input[type=checkbox]').change(function(){
    var name = $(this).prop('name');
    if($(this).is(":checked"))
      $("tr." + name).show();
    else
      $("tr." + name).hide();
  });
});

但是在页面加载之后，所有的标签都会显示出来

我刚刚读到，当只选中一个复选框时，您希望显示。我认为……
jQuery的hasClass（）
是一个很好的开始：非常感谢您的精彩解释。这正是我所需要的。我感谢所有的帮助。