多級勾選框聯動核心js

最近寫了兩次多級聯動勾選框，有了點小心得，總結一下：

需求：

情形：當勾選/取消勾選框

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>

。

多級勾選框聯動核心js

多級勾選框聯動核心js

selenium---勾選框處理

Vuel+Element中動態修改checkbox勾選框顏色

簡單的點菜（複選框）---原生js

TERSUS筆記員工資訊512-Tersus勾選框全選和全不選的三種設定方法(轉載)

JS面向物件之單選框實現

JS面向物件之多選框實現

微信小程式如何實現radio單選框單擊打勾和取消

Js實現複選框的全選、全不選反選功能程式碼例項

JS實現多選框的操作

VUE使用el-table展開行載入子節點table聯動勾選《VUE專欄四》

elementui checkbox複選框實現層級聯動

每日小記-切換選項卡時，保留複選框勾選

js中複選框的取值及賦值示例詳解

js單選框切換

js判斷複選框是否選中的方法示例【基於jQuery】

JS EasyUI複選框新增提示(title)

利用css將複選框設為透明並改變勾選樣式

JS如何獲取表單中複選框的值？

Ajax 上傳圖片，修改圖片，複選框操作，聯動詳情

多級勾選框聯動核心js

相關推薦