如何基于Checkbox选中状态筛选显示数据库生成的对应表格行

我希望根据Checkbox的选中状态显示对应的表格行，仅展示匹配的特定行。我对JavaScript不太熟悉，尝试修改现有代码但无法适配从数据库读取后渲染的表格数据。现有JS脚本是匹配td的内容值，但我的表格所有数据都来自数据库，没有在页面中显式写死，请问该如何调整代码实现需求？

• 模板渲染逻辑错误：<tr>标签放在了数据库循环之外，只会生成1行表格数据，所有数据库条目会挤在同一行
• 选择器拼写错误：表格class为datatable，但JS代码中分别使用了不存在的.dataclass、.datatbl选择器，无法定位到目标表格
• 事件绑定位置错误：点击事件绑定在了checkbox外层的div容器上，点击容器任意位置都会触发筛选，逻辑不合理
• HTML结构错误：表格嵌套了两层<thead>标签，属于无效结构
• 模板变量未正确标记：后端渲染的变量没有加模板分隔符，会直接输出变量名字符串而非实际数据

<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="AMERICA" placeholder="Select Country" id="id_country_0" onchange="filter_type()">
      AMERICA
    </label>
  </li>
  <li>
    <label for="id_country_3">
      <input type="checkbox" name="country" value="newyork" placeholder="Select Country" id="id_country_3" onchange="filter_type()">
      newyork
    </label>
  </li>
  <li>
    <label for="id_country_2">
      <input type="checkbox" name="country" value="china" placeholder="Select Country" id="id_country_2" onchange="filter_type()">
      china
    </label>
  </li>
 </ul>
</div>
<table class="datatable" id='table_id'> 
  <thead>
    <tr>
      <th>Region</th>
      <th>Area</th>
      <th>Country</th>
    </tr>
  </thead>
  <tbody>
    {% for i in database %}
    <tr class="data-row">
      <td>{{i.Region}}</td>
      <td>{{i.Area}}</td>
      <td>{{i.Country}}</td>
    </tr>
    {% endfor %}
  </tbody>
</table>

<script>
/* 如果你的项目还未引入jQuery，需要先引入jQuery库再使用这段脚本 */
function filter_type() {
  // 收集所有选中的国家值
  var all_checked_types = [];
  $('input[name="country"]:checked').each(function(){
    all_checked_types.push($(this).val().trim());
  });

  // 遍历所有数据行进行筛选
  $('#table_id .data-row').each(function(){
    // 读取当前行第三列（国家列）的文本，去掉首尾空格
    var row_country = $(this).find('td').eq(2).text().trim();
    if(all_checked_types.length === 0 || all_checked_types.includes(row_country)){
      $(this).show();
    }else{
      $(this).hide();
    }
  });
}
</script>

• 修复了模板循环逻辑，将<tr>放入循环内部，每个数据库条目都会生成独立的表格行，完全适配动态渲染的数据库数据
• 统一使用表格ID+行class定位元素，避免选择器拼写错误
• 优化了值匹配逻辑，自动去除checkbox值和td文本的首尾空格，避免因为空格导致的匹配失败
• 事件绑定改为checkbox的change事件，只有勾选状态变更时才触发筛选，逻辑更合理
• 不需要对表格内容做任何硬编码适配，不管是静态写死还是数据库动态渲染的表格都可以直接使用

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