每日小記-切換選項卡時，保留複選框勾選
阿新 • • 發佈：2020-08-20
需求
專案中遇到一個需求，點選不同的選項卡，顯示不同的資料，顯示的資料為多個複選框不等，
如圖所示，點選“資料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 { width: 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>