如何在回收视图中为每个卡片视图实现单选提醒对话框？

<!-- HTML -->
<div class="card-view" id="card-view-1">
  <input type="checkbox" class="card-checkbox" id="card-checkbox-1">
  <label for="card-checkbox-1">Card View 1</label>
</div>

<div class="card-view" id="card-view-2">
  <input type="checkbox" class="card-checkbox" id="card-checkbox-2">
  <label for="card-checkbox-2">Card View 2</label>
</div>

<!-- JavaScript -->
<script>
  // 获取所有卡片视图的复选框元素
  const checkboxes = document.querySelectorAll('.card-checkbox');

  // 为每个复选框添加事件监听器
  checkboxes.forEach((checkbox) => {
    checkbox.addEventListener('change', (event) => {
      const cardViewId = event.target.parentNode.id; // 获取卡片视图的ID
      const cardViewName = event.target.nextElementSibling.textContent; // 获取卡片视图的名称

      // 显示提醒对话框
      const confirmDialog = confirm(`您已选择了卡片视图：${cardViewName}，是否确认选择？`);

      if (confirmDialog) {
        // 用户点击确认按钮后的操作
        // 可以在这里执行保存到数据库或其他处理
        console.log(`已选择卡片视图：${cardViewName}`);
      } else {
        // 用户点击取消按钮后的操作
        // 可以在这里进行其他处理
        console.log('取消选择卡片视图');
      }
    });
  });
</script>