JavaScript/JQuery：通过多个单选按钮筛选HTML表格

我来给你一个完整且易理解的实现方案，亲测可行，你可以直接套用：

完整代码示例 #

HTML结构 #

<!-- 筛选控件 -->
<div class="filters">
  <div>
    <label>Auto筛选:</label>
    <input type="radio" name="auto-filter" value="yes" checked> Yes
    <input type="radio" name="auto-filter" value="no"> No
    <input type="radio" name="auto-filter" value="all"> 全部
  </div>
  <div>
    <label>Manually筛选:</label>
    <input type="radio" name="manually-filter" value="yes" checked> Yes
    <input type="radio" name="manually-filter" value="no"> No
    <input type="radio" name="manually-filter" value="all"> 全部
  </div>
</div>

<!-- 目标表格 -->
<table id="data-table" border="1">
  <thead>
    <tr>
      <th>序号</th>
      <th>Auto</th>
      <th>Manually</th>
      <th>内容</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>yes</td>
      <td>no</td>
      <td>符合条件的行1</td>
    </tr>
    <tr>
      <td>2</td>
      <td>no</td>
      <td>no</td>
      <td>不符合的行</td>
    </tr>
    <tr>
      <td>3</td>
      <td>yes</td>
      <td>yes</td>
      <td>不符合的行</td>
    </tr>
    <tr>
      <td>4</td>
      <td>yes</td>
      <td>no</td>
      <td>符合条件的行2</td>
    </tr>
  </tbody>
</table>

JavaScript逻辑 #

// 获取所有筛选单选按钮和表格
const filterRadios = document.querySelectorAll('input[type="radio"][name^="filter"]');
const tableBody = document.querySelector('#data-table tbody');

// 筛选函数
function filterTable() {
  // 获取当前选中的筛选值
  const autoFilter = document.querySelector('input[name="auto-filter"]:checked').value;
  const manuallyFilter = document.querySelector('input[name="manually-filter"]:checked').value;

  // 遍历所有表格行
  const rows = tableBody.querySelectorAll('tr');
  rows.forEach(row => {
    // 获取当前行的Auto和Manually列的值（注意列索引，这里Auto是第2列，索引为1）
    const rowAuto = row.cells[1].textContent.trim().toLowerCase();
    const rowManually = row.cells[2].textContent.trim().toLowerCase();

    // 判断是否匹配筛选条件
    const matchesAuto = autoFilter === 'all' || rowAuto === autoFilter;
    const matchesManually = manuallyFilter === 'all' || rowManually === manuallyFilter;

    // 根据匹配结果显示/隐藏行
    row.style.display = matchesAuto && matchesManually ? 'table-row' : 'none';
  });
}

// 给所有单选按钮绑定change事件
filterRadios.forEach(radio => {
  radio.addEventListener('change', filterTable);
});

// 页面加载时执行一次初始筛选
filterTable();

关键细节说明 #

• 单选按钮组通过name属性区分：auto-filter和manually-filter确保每组内只能选一个选项，我额外加了「全部」选项让筛选更灵活，你可以根据需求直接移除。
• 核心逻辑是同时判断两个筛选条件：只有当行的Auto值匹配Auto筛选、且Manually值匹配Manually筛选时，才显示该行，完美符合你的需求。
• 使用trim().toLowerCase()处理单元格文本，避免因为空格或大小写不一致导致匹配失败的问题。
• 列索引要对应你的实际表格结构：如果你的Auto列是第3列，那索引要改成2（因为cells是从0开始计数的）。

常见问题排查 #

如果你之前的实现失败，大概率是这几个原因：

• 没有正确获取选中的单选按钮值：一定要用:checked选择器准确获取当前选中项。
• 忽略了逻辑与（&&）的关系：只判断了单个条件，没有同时校验两个筛选规则。
• 单元格文本有多余空格：必须用trim()处理，避免" yes "和"yes"不匹配的情况。

内容的提问来源于stack exchange，提问作者Mr. Anderson