需求
项目中遇到一个需求，点击不同的选项卡，显示不同的数据，显示的数据为多个复选框不等，
如图所示，点击“数据1”即显示data1中的数据，点击“数据2”即显示data2中的数据，且要求两个选项卡中的复选框勾选互不影响。
问题
最初采用的方式为，点击“数据1”使用data1的数据渲染到class为checks的div中，点击“数据2”使用data2的数据替换到class为checks的div中。
但实际发现，切换选项卡的同时会刷新页面，即复选框的勾选会清空，理想状态为切换回来时保留之前勾选的选项。
解决
最后选定了display:none,来控制选项卡的显示和隐藏，让两个页面同时存在，并声明flag来控制页面1和2的全选和取消按钮。
代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
.top {
100%;
height: 200px;
border: 1px solid #ddd;
}
.checks-outter {
margin-top: 8px;
padding-left: 10px;
}
</style>
</head>
<body>
<div class="top"></div>
<div class="checks-outter">
<div class="outter">
<button class="checkAll">全选</button>
<button class="checkNone">取消</button>
<button class="data1">数据1</button>
<button class="data2">数据2</button>
</div>
<div class="checks1"></div>
<div class="checks2" style="display: none"></div>
</div>
<script src="./js/jquery-2.2.4.min.js"></script>
<script>
var data1={name:'data1',data:['仓库1','仓库2','仓库3','仓库4','仓库5']};
var data2={name:'data2',data:['仓库1','仓库3','仓库4','仓库5','仓库7','仓库8']};
//把html封装，便于根据不同数据获取不同的html
function getHtml(data) {
var html="";
for(var i=0;i<data.data.length;i++) {
html+=`
<input class="item-${data.name}" type="checkbox" value="${data.data[i]}">
<span>${data.data[i]}</span>
`;
}
return html;
}
var flag=1; //flag为1即显示data1数据，flag为2即显示data2数据
//把两个选项卡中的数据渲染出来
$(getHtml(data1)).appendTo($(".checks1"));
$(getHtml(data2)).appendTo($(".checks2"));
//全选和取消-点击事件
$(".checkAll").on("click",function() {
if(flag==1) {
$(".item-data1").prop("checked",true);
}else if(flag==2) {
$(".item-data2").prop("checked",true);
}
})
$(".checkNone").on("click",function() {
if(flag==1) {
$(".item-data1").prop("checked",false);
}else if(flag==2) {
$(".item-data2").prop("checked",false);
}
})
//点击显示不同的数据
$(".data1").on("click",function() {
flag=1;
$(".checks2").hide();
$(".checks1").show();
})
$(".data2").on("click",function() {
flag=2;
$(".checks1").hide();
$(".checks2").show();
})
</script>
</body>
</html>
更新后代码：
切换选项卡时，保留复选框勾选(2)