如何在选中多个复选框时显示div？

<input type="checkbox" id="checkbox1">
<label for="checkbox1">选项1</label>
<input type="checkbox" id="checkbox2">
<label for="checkbox2">选项2</label>
<input type="checkbox" id="checkbox3">
<label for="checkbox3">选项3</label>

<div id="targetDiv" style="display: none;">
  这是目标div元素
</div>

// 获取复选框元素和目标div元素
var checkboxes = document.querySelectorAll('input[type="checkbox"]');
var targetDiv = document.getElementById('targetDiv');

// 为每个复选框添加事件监听器
checkboxes.forEach(function(checkbox) {
  checkbox.addEventListener('change', function() {
    // 检查哪些复选框被选中
    var checkedCheckboxes = document.querySelectorAll('input[type="checkbox"]:checked');
    
    // 如果有复选框被选中，显示目标div元素；如果没有复选框被选中，隐藏目标div元素
    if (checkedCheckboxes.length > 0) {
      targetDiv.style.display = 'block';
    } else {
      targetDiv.style.display = 'none';
    }
  });
});