js简单表格列表全选反选代码

在JavaScript中实现一个简单的表格列表的全选和反选功能，可以通过以下步骤来完成：

基础概念

全选：选中表格中的所有行。
反选：选中当前未选中的行，并取消选中当前已选中的行。

类型与应用场景

类型：这是一种常见的UI交互功能，适用于任何需要批量操作的表格列表。
应用场景：例如，在电商平台的购物车页面，用户可以全选所有商品进行结算；在管理后台的数据列表中，管理员可以全选数据进行批量删除或修改。

示例代码

以下是一个简单的HTML和JavaScript代码示例，展示了如何实现表格的全选和反选功能：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>表格全选反选示例</title>
<style>
  table {
    width: 100%;
    border-collapse: collapse;
  }
  th, td {
    border: 1px solid #ddd;
    padding: 8px;
  }
  th {
    background-color: #f2f2f2;
  }
</style>
</head>
<body>

<table id="itemTable">
  <thead>
    <tr>
      <th><input type="checkbox" id="selectAll"></th>
      <th>商品名称</th>
      <th>价格</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><input type="checkbox" class="itemCheckbox"></td>
      <td>商品A</td>
      <td>¥100</td>
    </tr>
    <tr>
      <td><input type="checkbox" class="itemCheckbox"></td>
      <td>商品B</td>
      <td>¥200</td>
    </tr>
    <!-- 更多行 -->
  </tbody>
</table>

<script>
  document.getElementById('selectAll').addEventListener('change', function() {
    var checkboxes = document.querySelectorAll('.itemCheckbox');
    for (var i = 0; i < checkboxes.length; i++) {
      checkboxes[i].checked = this.checked;
    }
  });

  document.querySelectorAll('.itemCheckbox').forEach(function(checkbox) {
    checkbox.addEventListener('change', function() {
      var allChecked = true;
      document.querySelectorAll('.itemCheckbox').forEach(function(cb) {
        if (!cb.checked) allChecked = false;
      });
      document.getElementById('selectAll').checked = allChecked;
    });
  });
</script>

</body>
</html>