Javascript jquery在dom中动态显示属于一个或多个特定类的表行

我有基本的html结构：

<table>

  <tbody>
    <tr class="1">
      <td>
        <p style="font-size:large"> 
            <span class="muted"> This is the first object </span> 
        </p>
      </td>
    </tr>

    <tr class="2">
      <td>
        <p style="font-size:large"> 
            <span class="muted"> This is second object </span> 
        </p>
      </td>
    </tr>

    <tr class="3">
        <p style="font-size:large"> 
            <span class="muted"> this is the third object </span> 
        </p>
      </td>
    </tr>

</tbody>
</table>

这是第一个对象


这是第二个目标


这是第三个目标

然后我有复选框，我想要的功能是， 如果选中复选框1，则仅显示类为1的tr

如果单击复选框2和3，则类1的tr将被隐藏，并且2，3将显示在dom中

同样，如果复选框2，*3*未选中，并且类2选中了1，3不显示，并且显示1

---

在jQuery中如何实现这一点？

这里有一个使用收音机的解决方案，因为解释似乎表明您希望选择显示2和3或1。收音机相互抵消，而复选框则互不抵消

如果这不是你想要的行为，你需要澄清你的解释

HTML:

---

演示：

您确定不需要收音机吗？所以选择切换我想要，我想要，我想要。你做了什么？或者你希望有人能帮你完成工作吗？我是jquery新手，正在试用

filter

的东西，不确定什么是最好的方法，因此我把它放在这里，以了解最好的方法。

<label>Show All<input type="radio" value="0" name="radio"></label>
<label>1<input type="radio" value="1" name="radio"></label>
 <label>2 &amp; 3<input type="radio" value="23" name="radio"></label>

var rows = $('tr');

$(':radio').change(function() {
    var classNum = $(this).val();
    rows.hide();
    var toShow;
    if( classNum=='0'){
       toShow=rows;        
    }else{
        toShow = classNum=='1' ? rows.filter('.1') :  rows.not('.1');
    }
    toShow.show();
});