根据复选框隐藏/显示表行

<table>
  <thead>
    <tr>
      <th>选择</th>
      <th>姓名</th>
      <th>年龄</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox" class="checkbox" data-row="1"></td>
      <td>张三</td>
      <td>25</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="checkbox" data-row="2"></td>
      <td>李四</td>
      <td>30</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="checkbox" data-row="3"></td>
      <td>王五</td>
      <td>28</td>
    </tr>
  </tbody>
</table>

// 获取所有复选框元素
var checkboxes = document.querySelectorAll('.checkbox');

// 为每个复选框添加事件监听器
checkboxes.forEach(function(checkbox) {
  checkbox.addEventListener('change', function() {
    var row = this.getAttribute('data-row');
    var tableRow = document.querySelector('tr:nth-child(' + (parseInt(row) + 1) + ')');
    
    // 根据复选框状态显示或隐藏表行
    if (this.checked) {
      tableRow.style.display = '';
    } else {
      tableRow.style.display = 'none';
    }
  });
});