1.需求背景

公司要做一個指揮排程頁面，其中有一個功能就是通過列表控制地圖上的攝像頭顯示和隱藏，如下圖

通過傳統的控制多選框的,原始碼如下

//全選/全不選操作
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);