javascript - jquery在属于一个/多个特定类的dom中动态显示表行

Question

我有基本的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，则只显示tr类1。

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

再次，如果复选框2 ,* 3 * 未选中并且1被选中 tr 类2，3不显示并且显示1。

如何在 jQuery 中做到这一点？

Answer 1

这是使用收音机的解决方案，因为解释似乎表明您希望选择2&3或1来显示。收音机相互取消，而复选框则不会。

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

HTML：

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

JS

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

演示：http: //jsfiddle.net/wGLfX/