实现HTML表格中搜索框与复选框筛选的联动功能

问题分析 #

当前两个筛选逻辑各自独立操作行的显示状态，导致互相覆盖。要实现联动，必须同时校验搜索关键词和复选框选中状态，只有行满足两个条件时才显示。

修改后完整代码 #

HTML（修复未闭合标签问题） #

<!-- SEARCH -->
<h3>Search by keyword or phrase:</h3>
<input type="text" id="myInput" onkeyup="filterTable()" placeholder="Start typing to filter the table below" style="width:100%; transform: none;">

<!-- CHECKMARKS -->
<form action="" method="post" name="frm1" id="frm1">
  <h3>Filter by category:</h3>
  <label class="clickable">
    <input type="checkbox" name="cluster_ids" id="cluster_ids" onclick="checkedAll.call(this);" checked /> Select all
  </label><br>
  <div style="float:left; width:33%; min-width:200px;">
    <label class="clickable">
      <input value="For attorneys" type="checkbox" name="cluster_ids" checked/> For attorneys
    </label><br>
    <label class="clickable">
      <input value="For clinicians" type="checkbox" name="cluster_ids" checked/> For clinicians
    </label><br>
    <label class="clickable">
      <input value="For patients and families" type="checkbox" name="cluster_ids" checked/> For patients and families
    </label><br>
  </div>

  <!-- TABLE -->
  <table id="myTable">
    <tr>
      <th>
        <h1>Resource</h1>
      </th>
      <th>
        <h1>Category</h1>
      </th>
    </tr>
    <tr>
      <td>
        <h3>20 things patients can do to help prevent medical errors</h3>
        <p>Information for patients from the Agency for Healthcare Research and Quality (AHRQ)</p>
      </td>
      <td class="topic-column">For patients and families</td>
    </tr>
    <tr>
      <td>
        <h3>Best practices for attorneys representing patients using CARe</h3>
        <p>How lawyers can best support patients during the CARe process</p>
      </td>
      <td class="topic-column">For attorneys</td>
    </tr>
    <tr>
      <td>
        <h3>Clinician CARe communication algorithm</h3>
        <p>Flow chart with examples of what to say and what not to say during conversations with patients and families</p>
      </td>
      <td class="topic-column">For clinicians</td>
    </tr>
    <tr>
      <td>
        <h3>Guidelines for handling medical adverse events: Enhancing safety through candid communication</h3>
        <p>Covers the seven aspects of response to adverse events: initial response, truth-telling, apologies, mediation, root cause analysis, compensation, and reporting</p>
      </td>
      <td class="topic-column">For clinicians</td>
    </tr>
    <tr>
      <td>
        <h3>Handout for patients</h3>
        <p>A patient-focused flyer that explains the elements of CARe</p>
      </td>
      <td class="topic-column">For patients and families</td>
    </tr>
  </table>
</form>

CSS（优化布局） #

table#myTable {
  width: 800px;
  margin-top: 20px;
  clear: left; /* 清除浮动，避免表格与复选框区域重叠 */
}

JavaScript（统一筛选逻辑） #

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
// 统一筛选函数，同时处理搜索和分类条件
function filterTable() {
  // 获取搜索关键词并转大写
  const searchKeyword = document.getElementById("myInput").value.toUpperCase();
  // 获取所有选中的分类值
  const selectedCats = $('input[name="cluster_ids"]:checked').map(function() {
    return this.value;
  }).get();

  // 遍历所有数据行（跳过表头）
  $('#myTable tr:not(:first)').each(function() {
    const $row = $(this);
    const rowTitle = $row.find('td:first').text().toUpperCase();
    const rowCat = $row.find('td:eq(1)').text();

    // 判断是否同时满足两个条件：
    // 1. 搜索关键词为空，或标题包含关键词
    // 2. 选中了全选，或当前行分类在选中列表中
    const matchSearch = searchKeyword === '' || rowTitle.includes(searchKeyword);
    const matchCat = selectedCats.includes('Select all') || selectedCats.includes(rowCat);

    // 根据匹配结果切换行的显示状态
    $row.toggle(matchSearch && matchCat);
  });
}

// 复选框变更时触发筛选
$(document).ready(function() {
  $('input[type="checkbox"]').change(function() {
    // 处理全选/取消全选逻辑
    if (this.id === 'cluster_ids') {
      $('input[name="cluster_ids"]').prop('checked', this.checked);
    }
    filterTable();
  });
});

// 兼容原全选按钮的点击事件
function checkedAll() {
  $('input[name="cluster_ids"]').prop('checked', this.checked);
  filterTable();
}
</script>

核心修改说明 #

• 合并筛选逻辑：用filterTable()统一处理搜索和分类筛选，每次操作都同时校验两个条件，避免互相覆盖。
• 修复HTML结构：补全未闭合的<tr>标签，避免布局异常。
• 优化全选逻辑：点击全选时自动同步所有复选框状态，并触发筛选。
• 联动触发：搜索输入、复选框点击都会调用统一的筛选函数，确保两种筛选方式互相影响。

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