我有基本的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中完成?
答案 0 :(得分:2)
这是使用无线电的解决方案,因为解释似乎表明您需要选择 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 & 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();
});