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 ，则仅显示类 1 的 tr 。

如果点击复选框 2 和 3 ，则隐藏 1 tr 2 ， 3 显示在dom中。

如果取消选中复选框 2 ，* 3 *，并选中 1 ，则选择 1 ， 3 不显示， 1 显示。

如何在jQuery中完成？

Answer 1

这是使用无线电的解决方案，因为解释似乎表明您需要选择 2＆amp; 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();
});

DEMO：http://jsfiddle.net/wGLfX/

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

1 个答案: