如何使用复选框显示和隐藏选项卡

<input type="checkbox" id="toggleCheckbox">
<div class="tabs">
  <label for="tab1">Tab 1</label>
  <input type="radio" name="tabs" id="tab1">
  <div class="tab-content">Tab 1 content</div>

  <label for="tab2">Tab 2</label>
  <input type="radio" name="tabs" id="tab2">
  <div class="tab-content">Tab 2 content</div>

  <label for="tab3">Tab 3</label>
  <input type="radio" name="tabs" id="tab3">
  <div class="tab-content">Tab 3 content</div>
</div>

.tab-content {
  display: none;
}

.tabs {
  border: 1px solid #ccc;
  padding: 10px;
}

.tabs label {
  display: inline-block;
  margin-right: 10px;
}

.tabs input[type="radio"] {
  display: none;
}

.tabs input[type="checkbox"] {
  display: none;
  position: absolute;
  left: -9999px;
}

.tabs input[type="checkbox"]:checked ~ .tab-content {
  display: block;
}

var checkbox = document.getElementById('toggleCheckbox');
var tabContents = document.querySelectorAll('.tab-content');

checkbox.addEventListener('change', function() {
  if (this.checked) {
    tabContents.forEach(function(content) {
      content.style.display = 'block';
    });
  } else {
    tabContents.forEach(function(content) {
      content.style.display = 'none';
    });
  }
});