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

<input type="checkbox" id="checkbox">
<label for="checkbox">显示/隐藏选项卡</label>

<div class="tab" id="tab1">选项卡1内容</div>
<div class="tab" id="tab2">选项卡2内容</div>
<div class="tab" id="tab3">选项卡3内容</div>

.tab {
  display: none;
}

#checkbox:checked ~ #tab1,
#checkbox:checked ~ #tab2,
#checkbox:checked ~ #tab3 {
  display: block;
}

var checkbox = document.getElementById('checkbox');
var tabs = document.getElementsByClassName('tab');

checkbox.addEventListener('change', function() {
  for (var i = 0; i < tabs.length; i++) {
    if (checkbox.checked) {
      tabs[i].style.display = 'block';
    } else {
      tabs[i].style.display = 'none';
    }
  }
});