如何用JavaScript根据checkbox选中状态显示对应表格行并解决相关报错

1. 报错根因与解决 #

你遇到的Uncaught ReferenceError: show Hide is not defined错误，是因为你给id="id_row"的div元素添加了多余的onclick="show Hide()"属性，函数名中间误加了空格，直接删除这个多余的onclick属性即可消除报错。

2. 现有代码其他问题 #

• 你将change事件绑定到了div容器上，div本身没有checked属性，无法获取checkbox的选中状态
• 模板循环逻辑错误，所有表格行共用重复的id="trow"，id唯一性规则会导致选择器失效
• 没有关联checkbox选中值和表格行的国家字段，无法实现按选中值过滤

3. 完整修复代码 #

HTML部分修正 #

<div>Country</div>
<!-- 删掉div上多余的onclick属性 -->
<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">
 NORTHAMERICA</label>
</li>
    <li><label for="id_country_3"><input type="checkbox" name="country" value="AMERICA" placeholder="Select Country" id="id_country_3">
 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标签外，每个行绑定data-country属性存储数据库读取的国家值 -->
    {% for i in database %} 
    <tr data-country="{{i.Country}}">
      <td>{{i.Region}}</td>
      <td>{{i.Area}} </td>
      <td>{{i.Country}}</td>
    </tr>
    {% endfor %}
  </tbody>
</table>

JavaScript部分修正 #

$(document).ready(function () {
  // 将事件绑定到checkbox元素上
  $('#id_row input[type="checkbox"]').on('change', function(){
    // 收集所有已选中的国家值
    let selectedCountries = $('input[name="country"]:checked').map(function(){
      return $(this).val().trim()
    }).get()
    
    // 未选中任何选项时显示所有行
    if(selectedCountries.length === 0){
      $('#table_id tbody tr').show()
    } else {
      // 遍历所有行，匹配国家值是否在选中列表中
      $('#table_id tbody tr').each(function(){
        let rowCountry = $(this).data('country').trim()
        selectedCountries.includes(rowCountry) ? $(this).show() : $(this).hide()
      })
    }
  });
});

4. 动态值匹配说明 #

不需要硬编码任何国家名，所有国家值都由后端渲染时直接写入checkbox的value属性和表格行的data-country属性，JS直接读取两个属性做比对即可，新增国家时只需要正常渲染前端页面，不需要修改JS逻辑。

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