写一个tabs 里面有全选 复选，所有的tab页面相同复选、全选是联动的

A：以下是一个简单的实现：

HTML：

<div class="tabs">
  <div class="tab-headers">
    <div class="tab-header active" data-tab="tab1">Tab 1</div>
    <div class="tab-header" data-tab="tab2">Tab 2</div>
    <div class="tab-header" data-tab="tab3">Tab 3</div>
    <div class="select-all">
      <input type="checkbox" id="select-all" />
      <label for="select-all">全选</label>
    </div>
  </div>
  <div class="tab-content active" data-tab="tab1">
    <div class="checkboxes">
      <div>
        <input type="checkbox" name="tab1-checkbox" id="tab1-checkbox-1" />
        <label for="tab1-checkbox-1">Checkbox 1</label>
      </div>
      <div>
        <input type="checkbox" name="tab1-checkbox" id="tab1-checkbox-2" />
        <label for="tab1-checkbox-2">Checkbox 2</label>
      </div>
    </div>
  </div>
  <div class="tab-content" data-tab="tab2">
    <div class="checkboxes">
      <div>
        <input type="checkbox" name="tab2-checkbox" id="tab2-checkbox-1" />
        <label for="tab2-checkbox-1">Checkbox 1</label>
      </div>
      <div>
        <input type="checkbox" name="tab2-checkbox" id="tab2-checkbox-2" />
        <label for="tab2-checkbox-2">Checkbox 2</label>
      </div>
    </div>
  </div>
  <div class="tab-content" data-tab="tab3">
    <div class="checkboxes">
      <div>
        <input type="checkbox" name="tab3-checkbox" id="tab3-checkbox-1" />
        <label for="tab3-checkbox-1">Checkbox 1</label>
      </div>
      <div>
        <input type="checkbox" name="tab3-checkbox" id="tab3-checkbox-2" />
        <label for="tab3-checkbox-2">Checkbox 2</label>
      </div>
    </div>
  </div>
</div>

CSS：

.tabs {
  border: 1px solid #ccc;
  margin: 20px;
}

.tab-headers {
  display: flex;
}

.tab-header {
  cursor: pointer;
  padding: 10px;
  background-color: #f2f2f2;
  border-right: 1px solid #ccc;
  flex-grow: 1;
  text-align: center;
}

.tab-header.active {
  background-color: #ccc;
}

.select-all {
  margin-left: auto;
  display: flex;
  align-items: center;
  padding: 10px;
}

.select-all label {
  margin-left: 5px;
}

.tab-content {
  display: none;
  padding: 10px;
}

.tab-content.active {
  display: block;
}

.checkboxes {
  display: flex;
  flex-direction: column;
}

.checkboxes div {
  margin: 5px 0;
}

JavaScript：

const tabHeaders = document.querySelectorAll('.tab-header');
const tabContents = document.querySelectorAll('.tab-content');
const checkboxes = document.querySelectorAll('input[type="checkbox"]');

// Show the first tab by default
tabHeaders[0].classList.add('active');
tabContents[0].classList.add('active');

// Add event listeners to tab headers
for (let i = 0; i < tabHeaders.length; i++) {
  tabHeaders[i].addEventListener('click', function() {
    // Remove active class from all tab headers and tab contents
    for (let j = 0; j < tabHeaders.length; j++) {
      tabHeaders[j].classList.remove('active');
      tabContents[j].classList.remove('active');
    }

    // Add active class to the clicked tab header and corresponding tab content
    this.classList.add('active');
    document.querySelector(`.tab-content[data-tab="${this.dataset.tab}"]`).classList.add('active');
  });
}

// Add event listener to "全选" checkbox
document.querySelector('#select-all').addEventListener('change', function() {
  for (let i = 0; i < checkboxes.length; i++) {
    checkboxes[i].checked = this.checked;
  }
});

// Add event listeners to tab checkboxes
for (let i = 0; i < checkboxes.length; i++) {
  checkboxes[i].addEventListener('change', function() {
    // Get the tab content element that the checkbox is in
    const tabContent = this.closest('.tab-content');

    // Get all checkboxes in the same tab and check if they're all checked
    const tabCheckboxes = tabContent.querySelectorAll('input[type="checkbox"]');
    let allChecked = true;
    for (let j = 0; j < tabCheckboxes.length; j++) {
      if (!tabCheckboxes[j].checked) {
        allChecked = false;
        break;
      }
    }

    // Update "所有的tab页面相同复选" checkbox
    const allTabCheckboxesChecked = document.querySelectorAll(`.tab-content[data-tab="${tabContent.dataset.tab}"] input[type="checkbox"]:checked`);
    document.querySelector(`.tab-header[data-tab="${tabContent.dataset.tab}"] input[type="checkbox"]`).checked = allTabCheckboxesChecked.length === tabCheckboxes.length;

    // Update "全选" checkbox
    const allCheckedBoxes = document.querySelectorAll('input[type="checkbox"]:checked');
    document.querySelector('#select-all').checked = allCheckedBoxes.length === checkboxes.length;
  });
}

这段代码实现了一个基本的 tabs 组件，它包含多个选项卡，每个选项卡内部有多个复选框。全选复选框可以选择所有复选框，每个选项卡内的复选框状态更改会联动到该选项卡的“所有的tab页面相同复选”复选框，而所有选项卡的复选框状态更改又会联动到“全选”复选框。