如何通过SweetAlert的html方法动态生成对应数组长度的复选框？

云上老周

2026-6-17

问题原因与解决方法

你直接在SweetAlert的html参数里使用forEach循环是无效的——因为forEach没有返回值，它只是遍历数组执行回调，不会生成拼接好的HTML字符串，所以SweetAlert无法渲染出预期的复选框。

解决步骤

用map方法遍历用户名称数组，将每个元素转换成对应的复选框HTML字符串
用join('')把map返回的字符串数组合并成一个完整的HTML字符串
把拼接好的字符串传给SweetAlert的html参数

示例代码

错误写法（无效果）

const users = ['张三', '李四', '王五'];

Swal.fire({
  title: '选择用户',
  html: users.forEach(user => {
    return `<label><input type="checkbox" value="${user}"> ${user}</label><br>`;
  })
});

正确写法

const users = ['张三', '李四', '王五'];

// 生成复选框HTML字符串
const checkboxHtml = users.map(user => 
  `<label style="display:block;margin:4px 0;"><input type="checkbox" class="user-checkbox" value="${user}"> ${user}</label>`
).join('');

Swal.fire({
  title: '选择用户',
  html: checkboxHtml,
  confirmButtonText: '确认',
  preConfirm: () => {
    // 可选：获取选中的用户
    const checkedUsers = Array.from(document.querySelectorAll('.user-checkbox:checked'))
      .map(el => el.value);
    return checkedUsers;
  }
}).then(result => {
  if (result.isConfirmed) {
    Swal.fire('选中的用户：', result.value.join(', '), 'success');
  }
});