按复选框隐藏和显示表列选中/取消选中

<table>
  <thead>
    <tr>
      <th><input type="checkbox" id="selectAll"></th>
      <th><input type="checkbox" class="columnCheckbox" data-column="column1">列1</th>
      <th><input type="checkbox" class="columnCheckbox" data-column="column2">列2</th>
      <th><input type="checkbox" class="columnCheckbox" data-column="column3">列3</th>
    </tr>
  </thead>
  <tbody>
    <!-- 表格内容 -->
  </tbody>
</table>

// 获取全选复选框和列复选框
const selectAllCheckbox = document.getElementById('selectAll');
const columnCheckboxes = document.querySelectorAll('.columnCheckbox');

// 监听全选复选框的状态变化
selectAllCheckbox.addEventListener('change', function() {
  const isChecked = selectAllCheckbox.checked;
  
  // 遍历所有列复选框，设置它们的选中状态和列的显示状态
  columnCheckboxes.forEach(function(checkbox) {
    checkbox.checked = isChecked;
    const column = checkbox.dataset.column;
    const columns = document.querySelectorAll('.' + column);
    columns.forEach(function(column) {
      column.style.display = isChecked ? 'table-cell' : 'none';
    });
  });
});

// 监听列复选框的状态变化
columnCheckboxes.forEach(function(checkbox) {
  checkbox.addEventListener('change', function() {
    const isChecked = checkbox.checked;
    const column = checkbox.dataset.column;
    const columns = document.querySelectorAll('.' + column);
    columns.forEach(function(column) {
      column.style.display = isChecked ? 'table-cell' : 'none';
    });
  });
});