如何使用JavaScript实现删除前确认弹窗及批量删除功能

一、修复单条删除二次确认功能 #

原有代码问题 #

• id属性不可重复：多账号列表下id="del"会出现id冲突，需改为class属性
• 选择器语法错误：querySelectorAll("del")是匹配<del>标签，匹配class需要加.前缀
• 节点集合绑定事件错误：querySelectorAll返回的是DOM节点集合，需遍历后逐个绑定点击事件
• 语法缺漏：原JS代码少了事件绑定的闭合括号)

修改后的代码 #

HTML代码（单条删除按钮）

<a href="uses_script.php?user_id=<?php echo $row['id'];?>&username=<?php echo $_SESSION['user_username']; ?>" 
  class="del"
  data-toggle="tooltip" 
  data-placement="top"
  title="删除"> 
  <i class="mdi mdi-close"></i>
</a>

JavaScript代码（单条删除确认）

// 选中所有删除按钮
const deleteIcons = document.querySelectorAll(".del");
// 遍历绑定点击事件
deleteIcons.forEach(delBtn => {
  delBtn.addEventListener("click", (e) => {
    const isConfirm = confirm("确定要删除该账号吗？");
    // 点击取消则阻止默认跳转行为
    if (!isConfirm) e.preventDefault();
  })
})

二、批量删除功能实现 #

第一步：新增批量操作UI元素 #

在账号列表表头加全选复选框、批量删除按钮，每条账号行首加单选复选框：

<!-- 表头位置加全选框和批量删除按钮 -->
<th><input type="checkbox" id="selectAll"> 全选</th>
<th colspan="2"><button id="batchDelBtn" type="button">批量删除</button></th>

<!-- 每一行账号的行首加选择框，存储当前行账号id -->
<tr>
  <td><input type="checkbox" class="userCheck" value="<?php echo $row['id']; ?>"></td>
  <!-- 其他账号信息列 -->
  <td>...</td>
  <td>原有单条删除按钮位置</td>
</tr>

第二步：新增批量删除JS逻辑 #

// 全选功能
const selectAll = document.querySelector("#selectAll");
const userChecks = document.querySelectorAll(".userCheck");
const batchDelBtn = document.querySelector("#batchDelBtn");

// 全选/取消全选绑定
selectAll.addEventListener("change", () => {
  userChecks.forEach(check => {
    check.checked = selectAll.checked;
  })
})

// 批量删除逻辑
batchDelBtn.addEventListener("click", () => {
  // 收集选中的账号id
  const selectedIds = Array.from(userChecks).filter(check => check.checked).map(check => check.value);
  if (selectedIds.length === 0) {
    alert("请先选择要删除的账号");
    return;
  }
  // 二次确认
  const isBatchConfirm = confirm(`确定要删除选中的${selectedIds.length}个账号吗？`);
  if (isBatchConfirm) {
    // 拼接参数跳转到处理页面，也可以用AJAX发送请求
    window.location.href = `uses_script.php?user_ids=${selectedIds.join(',')}&username=<?php echo $_SESSION['user_username']; ?>`;
  }
})

第三步：后端适配批量删除逻辑 #

在uses_script.php中接收批量id参数，拆分后做删除处理即可，注意后端必须做权限校验，不能完全依赖前端判断避免恶意请求。

附：账号管理界面参考图 #

内容的提问来源于stack exchange，提问作者Kaido Bagua