基于未勾选复选框切换表格行的Django前端问题求助

核心逻辑梳理 #

你的需求可简化为：

• 全不勾选复选框：显示所有表格行
• 勾选任意复选框：仅保留与勾选框匹配的行（隐藏未勾选框对应的行）

常见错误排查 #

1. 行标识使用错误：表格行不能用重复的id（你提到最多100行），必须用class或data-type属性标记行的类型（audio/video/writing/games），否则无法批量选中同类型行。
2. 事件绑定时机错误：jQuery代码必须在DOM加载完成后执行，否则无法找到复选框元素。
3. 数组转换遗漏：使用map()获取复选框值后，必须调用.get()转为原生数组，否则无法正常遍历。
4. 逻辑颠倒：误将勾选的行隐藏，或者全不勾选时未恢复显示所有行。

正确实现代码 #

假设你的HTML结构如下（若结构不同，仅需调整选择器）：

<!-- 过滤复选框：统一添加类名filter-checkbox，value对应行的类型 -->
<div class="filter-group">
  <label><input type="checkbox" class="filter-checkbox" value="audio"> 音频</label>
  <label><input type="checkbox" class="filter-checkbox" value="video"> 视频</label>
  <label><input type="checkbox" class="filter-checkbox" value="writing"> 写作</label>
  <label><input type="checkbox" class="filter-checkbox" value="games"> 游戏</label>
</div>

<!-- 数据表格：每行用class标记类型 -->
<table id="content-table">
  <tr class="audio"><td>音频条目1</td></tr>
  <tr class="video"><td>视频条目1</td></tr>
  <tr class="writing"><td>写作条目1</td></tr>
  <tr class="games"><td>游戏条目1</td></tr>
  <!-- 更多行... -->
</table>

对应的jQuery代码：

// DOM加载完成后执行代码
$(function() {
  // 给所有过滤复选框绑定change事件（支持鼠标、键盘操作）
  $('.filter-checkbox').on('change', function() {
    // 获取所有未勾选复选框对应的类型数组
    const uncheckedTypes = $('.filter-checkbox:not(:checked)')
      .map(function() { return $(this).val(); })
      .get();

    // 获取表格所有行
    const $tableRows = $('#content-table tr');

    // 情况1：全未勾选，显示所有行
    if (uncheckedTypes.length === 4) {
      $tableRows.show();
    } else {
      // 情况2：有勾选，先显示所有行，再隐藏未勾选类型的行
      $tableRows.show();
      uncheckedTypes.forEach(type => {
        $tableRows.filter('.' + type).hide();
      });
    }
  });
});

适配不同行标识的调整 #

如果你的表格行用data-type属性（比如<tr data-type="audio">），只需修改隐藏行的选择器：

// 替换forEach内的代码
$tableRows.filter(`[data-type="${type}"]`).hide();

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