如何在未选中复选框时隐藏表行

在未选中复选框时隐藏表行，可以通过以下步骤实现：

首先，在HTML中为每个复选框元素添加一个事件监听器，以便在复选框的状态发生改变时触发相应的函数。
在触发的函数中，通过JavaScript来获取所有的表行元素。
遍历每个表行元素，检查相应的复选框是否被选中。
如果复选框未被选中，则将相应的表行元素的CSS属性设置为"display: none;"，从而隐藏该行。

以下是一个示例代码：

<!DOCTYPE html>
<html>
<head>
<style>
    table {
        width: 100%;
        border-collapse: collapse;
    }
    td, th {
        border: 1px solid black;
        padding: 8px;
    }
</style>
</head>
<body>

<h2>隐藏表行示例</h2>

<input type="checkbox" id="checkbox1" onchange="hideTableRow()">
<label for="checkbox1">隐藏第一行</label>

<input type="checkbox" id="checkbox2" onchange="hideTableRow()">
<label for="checkbox2">隐藏第二行</label>

<table id="myTable">
  <tr>
    <th>姓名</th>
    <th>年龄</th>
    <th>性别</th>
  </tr>
  <tr>
    <td>张三</td>
    <td>25</td>
    <td>男</td>
  </tr>
  <tr>
    <td>李四</td>
    <td>30</td>
    <td>女</td>
  </tr>
</table>

<script>
function hideTableRow() {
  var table = document.getElementById("myTable");
  var checkboxes = document.querySelectorAll("input[type='checkbox']");

  for (var i = 0; i < table.rows.length; i++) {
    if (!checkboxes[i].checked) {
      table.rows[i+1].style.display = "none";
    } else {
      table.rows[i+1].style.display = "";
    }
  }
}
</script>

</body>
</html>

在上面的示例中，我们使用了一个简单的HTML表格，并在每个复选框上添加了一个事件监听器来调用hideTableRow()函数。该函数遍历了表格的每一行，根据相应的复选框的选中状态来设置行的CSS属性，从而实现隐藏或显示表行的功能。

请注意，上述示例中的代码仅提供了一个基本的实现思路，实际应用中可能需要根据具体的需求进行适当的修改。另外，推荐的腾讯云相关产品和产品介绍链接地址与本问题无关，因此不在答案中提供。