多級勾選框聯動核心js
阿新 • • 發佈:2020-11-15
最近寫了兩次多級聯動勾選框,有了點小心得,總結一下:
需求:
情形:當勾選/取消勾選框
1、其子集的框全部被勾選,當取消勾選框時,其子孫勾選框全部取消勾選;
2、其所有祖父級,若果檢查到子孫級有被勾選的,需要將自身狀態變成勾選狀態,若沒有被勾選的,則所有祖父級取消勾選轉態
程式碼:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <script> let o= { status:false, child:[ { status:true, child:[ {status:false,child:[]}, {status:false,child:[]}, {status:false,child:[]}, ] }, { status:false, child:[ {status:false,child:[]}, {status:false,child:[]}, {status:false,child:[]}, ] }, { status:false, child:[ {status:false,child:[]}, {status:false,child:[]}, {status:false,child:[]}, ] }, ] }; let a={}; a.changeChildStatus = function(curParent){ // 根據當前物件的狀態 改變所有子集的狀態 //引數接收當前物件 if(curParent.child && curParent.child.length>0){ curParent.child.forEach(item=>{ item.status = curParent.status; a.changeChildStatus(item); }) } } a.allChildStatusArr = function(obj){ // 獲取當前物件下所有子集的狀態 (遞迴) //引數接收當前物件 let allChildArr = []; function getAllChildSatus(obj){ if(obj.child && obj.child.length>0){ obj.child.forEach(item=>{ allChildArr.push(item.status); getAllChildSatus(item); }) } } getAllChildSatus(obj) return allChildArr; } a.changeParentStatus = function(parentObj){ // 根據子集狀態改變父級狀態 (遞迴) // 接收最大的物件 parentObj.allChildStatusArr = a.allChildStatusArr(parentObj); if(parentObj.allChildStatusArr.includes(true)){ parentObj.status = true; }else if(parentObj.allChildStatusArr.every(item=>item == false) && parentObj.allChildStatusArr.length > 0){ parentObj.status = false; } if(parentObj.child && parentObj.child.length>0){ parentObj.child.forEach(item=>{ a.changeParentStatus(item); }) } } a.linked = function(bigObj,curObj,plies = 0){ //聯動總方法 // 引數接收 最大物件,當前物件,層數 a.changeChildStatus.call(curObj,curObj);//改變當前物件下子集的狀態 for(let i = 0;i < plies; i++){ // 因為需要一層一層的改變父級狀態,所以有幾層,呼叫幾次 a.changeParentStatus.call(bigObj,bigObj); } } a.linked(o,o.child[0],3);//呼叫聯動方法 console.log(JSON.parse(JSON.stringify(o))); </script> </body> </html>
。