当我选中复选框时，有没有办法让每张卡都显示删除图标？

<div class="card">
  <input type="checkbox" class="checkbox">
  <div class="delete-icon"></div>
  <!-- 卡片内容 -->
</div>

.delete-icon {
  display: none; /* 默认隐藏删除图标 */
}

.checkbox:checked ~ .delete-icon {
  display: block; /* 当复选框选中时显示删除图标 */
}

<div class="card">
  <input type="checkbox" class="checkbox">
  <!-- 卡片内容 -->
</div>

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

checkboxes.forEach(checkbox => {
  checkbox.addEventListener('change', function() {
    const card = this.parentNode;
    if (this.checked) {
      const deleteIcon = document.createElement('div');
      deleteIcon.classList.add('delete-icon');
      card.appendChild(deleteIcon);
    } else {
      const deleteIcon = card.querySelector('.delete-icon');
      if (deleteIcon) {
        card.removeChild(deleteIcon);
      }
    }
  });
});