使用多个复选框隐藏和显示多个div

<input type="checkbox" id="checkbox1"> 显示/隐藏 Div 1<br>
<input type="checkbox" id="checkbox2"> 显示/隐藏 Div 2<br>
<input type="checkbox" id="checkbox3"> 显示/隐藏 Div 3<br>

<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>

document.getElementById("checkbox1").addEventListener("click", function() {
  var div1 = document.getElementById("div1");
  div1.style.display = this.checked ? "block" : "none";
});

document.getElementById("checkbox2").addEventListener("click", function() {
  var div2 = document.getElementById("div2");
  div2.style.display = this.checked ? "block" : "none";
});

document.getElementById("checkbox3").addEventListener("click", function() {
  var div3 = document.getElementById("div3");
  div3.style.display = this.checked ? "block" : "none";
});

div {
  padding: 10px;
  border: 1px solid #ccc;
  margin-top: 10px;
  background-color: #f9f9f9;
}