需求背景
公司要做一个指挥调度页面,其中有一个功能就是通过列表控制地图上的摄像头显示和隐藏,如下图
通过传统的控制多选框的,源码如下
//全选/全不选操作
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,即:
- 复制原有的checkbox到v1(随便一个变量)
- 删除原有的checkbox
- 改变v1状态值,(checked=false或checked=true),再放入原有被删除的checkbox的位置
var parent = $(el).parent();
var t = $(el).detach();
t.prop('checked', true);
t.appendTo(parent);