使用jQuery通过复选框隐藏表格行：仅首行生效问题求助

嘿，我来帮你捋捋为啥只有第一行生效哈！

首先得提个HTML的基础规范：ID属性在整个页面里必须是唯一的，不能重复使用。你现在的代码里只有第一个<tr>有id="TCG"，其他行没这个标识；就算你给其他行也加了相同ID，jQuery的$('#TCG')也只会匹配页面里第一个带这个ID的元素，这就是为啥只有第一行有反应的核心原因。

那怎么改呢？很简单，把ID换成class就行，class是可以重复用的，能批量选中一组元素。具体步骤如下：

1. 修改HTML结构 #

把需要控制的<tr>的id="TCG"改成class="TCG"，如果所有行都要受控制，就给每个<tr>都加上这个class：

<table>
  <tbody>
    <tr class="TCG">
      <td>Data 1</td>
      <td>Data 2</td>
    </tr>
    <tr class="TCG">
      <td>Data 3</td>
      <td>Data 4</td>
    </tr>
    <!-- 其他需要控制的行也加上class="TCG" -->
  </tbody>
</table>

2. 调整jQuery代码 #

把选择器从$('#TCG')换成$('.TCG')，这样就能选中所有带这个class的表格行啦：

$(document).ready(function () {
  $('#XL_TCG').change(function () {
    if (!this.checked) $('.TCG').fadeIn('slow');
    else $('.TCG').fadeOut('slow');
  });
  $('#XL_TCG').change();
});

额外小技巧 #

如果你的需求是直接控制表格里所有行，那连class都不用加，直接选中表格的所有<tr>就行：

// 选中表格tbody下的所有tr元素
if (!this.checked) $('table tbody tr').fadeIn('slow');
else $('table tbody tr').fadeOut('slow');

这样改完之后，所有目标行都会跟着复选框的状态一起显示或隐藏啦~

内容的提问来源于stack exchange，提问作者user3517199