上万个多选框造成的卡顿问题

需求背景

公司要做一个指挥调度页面，其中有一个功能就是通过列表控制地图上的摄像头显示和隐藏，如下图

通过传统的控制多选框的,源码如下

//全选/全不选操作
57         function setAllNo(){
58             var box = document.getElementById("boxid");
59             var loves = document.getElementsByName("love");
60             if(box.checked == false){
61                 for (var i = 0; i < loves.length; i++) {
62                     loves[i].checked = false;
63                 }
64             }else{
65                 for (var i = 0; i < loves.length; i++) {
66                     loves[i].checked = true;
67                     }
68             }

当这样实现checkbox的全选或全不选的时候，当多选框的数量很大时，页面就会假死过去

解决的方案

先把需要操作的checkbox移出移出dom，即：

1. 复制原有的checkbox到v1(随便一个变量)
2. 删除原有的checkbox
3. 改变v1状态值，（checked=false或checked=true），再放入原有被删除的checkbox的位置

            var parent = $(el).parent();
            var t = $(el).detach();
            t.prop('checked', true);
            t.appendTo(parent);