如何在JavaScript中根据国家复选框选中状态显示表格指定行

你现有代码存在几处逻辑错误，修正后即可实现选中复选框过滤对应表格行的效果：

• 类名不匹配：JS中调用的.dataclass、.datatbl类不存在，实际表格绑定的类为datatable
• 匹配字段错位：复选框的value存储的是地区名称，原代码却取表格第三列（索引为2）的国家字段做匹配，二者无法对应
• 语法不规范：表格重复嵌套了两层<thead>标签，事件绑定在父级div上稳定性不如直接绑定复选框的change事件

JS逻辑 #

function filter_type() {
  var all_checked_types = [];
  // 收集所有选中的国家/地区复选框值
  document.querySelectorAll('input[type="checkbox"][name^="country"]:checked').forEach(cb => {
    all_checked_types.push(cb.value.trim());
  });

  // 遍历表格行执行过滤
  document.querySelectorAll('.datatable tbody tr').forEach(row => {
    // 如果你要匹配国家字段，就把下方的cells[0]改成cells[2]，同时修改复选框的value为对应国家值
    const regionVal = row.cells[0].textContent.trim();
    if (all_checked_types.length === 0 || all_checked_types.includes(regionVal)) {
      row.style.display = 'table-row';
    } else {
      row.style.display = 'none';
    }
  });
}

HTML结构 #

<div>Country</div>
<div class="row" name="country_checkbox" id="id_row">
  <ul id="id_country">
    <li>
      <label for="id_country_0">
        <input type="checkbox" name="country" value="NORTHAMERICA" placeholder="Select Country" id="id_country_0" onchange="filter_type()">
        NORTHAMERICA
      </label>
    </li>
    <li>
      <label for="id_country_3">
        <input type="checkbox" name="country" value="ASIA" placeholder="Select Country" id="id_country_3" onchange="filter_type()">
        ASIA
      </label>
    </li>
    <li>
      <label for="id_country_2">
        <input type="checkbox" name="country" value="AMERICA" placeholder="Select Country" id="id_country_2" onchange="filter_type()">
        AMERICA
      </label>
    </li>
  </ul>
</div>
<table class="datatable" id='table_id'>
  <thead>
    <tr>
      <th>REGION</th>
      <th>AREA</th>
      <th>Country</th>
    </tr>
  </thead>
  <tbody>
    <tr id="trow">
      <td>NORTHAMERICA</td>
      <td>US</td>
      <td>US</td>
    </tr>
    <!-- 其他数据库生成的行自动适配 -->
  </tbody>
</table>

如果你需要按国家而非地区过滤，只需要将复选框的value改为对应国家名称，同时把JS中取row.cells[0]的逻辑改成row.cells[2]即可，所有数据库生成的表格行无需额外修改即可适配。

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