选中时将显示不同div的多个复选框

<input type="checkbox" id="checkbox1" class="checkbox">
<input type="checkbox" id="checkbox2" class="checkbox">
<input type="checkbox" id="checkbox3" class="checkbox">

<div id="div1" style="display: none;">Div 1</div>
<div id="div2" style="display: none;">Div 2</div>
<div id="div3" style="display: none;">Div 3</div>

const checkboxes = document.querySelectorAll('.checkbox');

checkboxes.forEach(checkbox => {
  checkbox.addEventListener('change', function() {
    const divId = this.id.replace('checkbox', 'div');
    const div = document.getElementById(divId);

    if (this.checked) {
      div.style.display = 'block';
    } else {
      div.style.display = 'none';
    }
  });
});

div {
  padding: 10px;
  background-color: #f0f0f0;
  margin-top: 10px;
}

.checkbox:checked + div {
  display: block;
}