前端开发|表格操作 layui多选框如何获取id，layui表格多选取值方法解析

本文目录导读：

1. 📌 核心方法解析
2. 💡 进阶技巧
3. ⚠️ 常见问题

🚀 Layui表格多选框获取ID的终极指南 🚀
（信息更新至2025-08，附超详细代码+趣味emoji✨）

📌 核心方法解析

Layui表格多选框获取ID主要依赖 table.checkStatus 方法,通过以下三步轻松实现：

1. 表格渲染时配置多选列

   <table id="demo" lay-filter="test"></table>

   layui.table.render({
     elem: '#demo',
     url: '/data',
     cols: [[
       {type: 'checkbox', fixed: 'left'},
       {field: 'id', title: 'ID', width: 80},
       {field: 'name', title: '姓名'}
     ]]
   });

2. 按钮点击事件获取选中ID

   <button class="layui-btn" onclick="getIds()">获取选中ID</button>

   function getIds() {
     // 🔍 获取选中数据
     const checkStatus = layui.table.checkStatus('demo');
     const ids = checkStatus.data.map(item => item.id).join(',');
     // 🎉 输出结果（可替换为实际业务逻辑）
     if (ids) {
       layer.alert(`选中的ID：${ids}`, {icon: 1});
     } else {
       layer.msg('请至少选择一行！', {icon: 5});
     }
   }

3. 动态分页场景处理

   layui.table.render({
     elem: '#demo',
     url: '/data',
     done: function() {
       // 📦 缓存数据（解决分页后选中状态丢失问题）
       window.tableData = this.cache;
     }
   });

💡 进阶技巧

• 全选/反选控制

  

  // 全选
  layui.table.checkAll('demo');
  // 反选
  layui.table.uncheckAll('demo');

• 结合后端交互

  // 🚀 批量删除示例
  function batchDelete() {
    const ids = getIds(); // 调用上述方法
    if (!ids) return;
    $.post('/delete', {ids: ids}, function(res) {
      layer.msg(res.msg, {icon: res.code === 1 ? 1 : 5});
      layui.table.reload('demo'); // 刷新表格
    });
  }

⚠️ 常见问题

1. 选中状态丢失？
   🔧 确保表格渲染时配置了 id 属性（如 lay-data="{id: 'demo'}"）。

2. 分页后数据混乱？
   🔧 使用 done 回调缓存数据，或升级至Layui 2.8.3+版本。

3. 如何获取其他字段？
   🔧 修改 map 方法：checkStatus.data.map(item => item.field)。

🎯
通过 table.checkStatus + map 组合，可快速提取选中ID，结合分页缓存和后端交互，轻松实现批量操作！💪
（测试环境：Layui 2.8.3 / Chrome 126）