解决Layui动态加载复选框选中异常及自定义实现方案

作者：青山有信

时间：2026-10-23

针对Layui动态加载复选框在分页或快速操作时出现的选中异常问题，本文提出一种基于Vue的自定义复选框替代方案。该方案通过简单的DOM操作与属性绑定，实现了单个选中、全选/取消及ID获取功能，有效规避了Layui渲染机制在特定场景下的缺陷，适用于需要稳定交互的后台管理系统。

文章目录

Layui动态复选框选中异常现象

问题描述

近期在使用Layui构建后台管理界面时，发现通过Ajax动态加载的复选框存在勾选状态不稳定的现象，偶尔会出现无法正常勾选或取消的情况。

当表格包含分页功能时，若最后一页数据量较少，可能导致其他页面下方的数据行无法被正确选中。

此外，在页面尚未完全加载完成或进行高频快速点击测试时，也容易出现选中失效的问题。

自定义复选框实现方案

虽然尝试使用Layui的更新渲染方法以及网上常见的修复技巧，能在很大程度上减少此类异常，但在极端快速操作下仍偶有发生。由于难以定位根本原因，最终采取了一种折中方案：放弃依赖Layui原生控件，转而自行编写复选框逻辑。


 <!--原有layui复选框-->
<td>
  <div class="layui-unselect layui-form-checkbox" lay-skin="primary" data-id='2'><i class="layui-icon">&#xe605;</i></div>
</td>
<!--替换为自己写的-->
<td>
  <div a="off" class="checkBox" v-bind:data-id='x.Id' v-on:click="checkBox(i)">
    <div></div>
  </div>
</td>

自定义实现的复选框兼容Vue事件绑定，能够支持单个选项的选中与取消、全选及取消全选操作。


//单个的选中取消 

checkBox:function(n){
  var checkbox = $('tbody tr').eq(n).find('.checkBox');
  if (checkbox.attr("a") == "off") {
    checkbox.children("div").css({
      "display" : "block"
    });
    checkbox.attr("a","on");
  }else {
    checkbox.children("div").css({
      "display" : "none"
    });
    checkbox.attr("a","off");
  }
}


//全选取消

checkBoxAll:function(){
  var obj = $('thead').find('.checkBox');
  if ($(obj).attr("a") == "off") {
    $('.checkBox div').css({"display" : "block"});
    $('.checkBox').attr("a","on");
  }else {
    $('.checkBox div').css({"display" : "none"});
    $('.checkBox').attr("a","off");
  }
}

选中状态与ID获取逻辑

在用户全选或选中部分选项后，可通过特定方法获取对应数据的ID列表，进而执行删除或其他业务操作。


function getId() {
  var obj = $("tbody .checkBox");
  var arr='';
  obj.each(function(index, el) {
    if(obj.eq(index).attr("a") == "on"){
      arr += obj.eq(index).attr('data-id')+ ','
    }
  });
  return arr;
}

以上关于解决Layui动态加载复选框无法选中问题的方案即为全部内容，希望能为遇到类似问题的开发者提供参考与支持。