amazeUI復擇框問題解決

2018年04月12日

這是官方github參考文件，各種坑，不好用，這讓我想到了當時用 layUI 的1.0版本遇到的各種問題。

上菜：

<div class=”am-u-sm-9″>
    <div class=”checkbox-group” id=”g_0″>
        <div class=”am-checkbox”>
            <input id=”p_0″ type=”checkbox” name=”par” value=”1″>
            <label for=”p_0″> 使用者列表</label>
        </div>
        <div class=”am-checkbox”>
            <div class=”am-checkbox”>
                <label><input data-g=”g_0″ type=”checkbox” name=”chi” value=”2″> 業務員</label>
            </div>
        </div>
        <div class=”am-checkbox”>
            <div class=”am-checkbox”>
                <label><input data-g=”g_0″ type=”checkbox” name=”chi” value=”3″> 普通使用者</label>
            </div>
        </div>
    </div>
    <div class=”checkbox-group” id=”g_1″>
        <div class=”am-checkbox”>
            <input id=”p_1″ type=”checkbox” name=”par” value=”4″>
            <label for=”p_1″> 系統管理</label>
        </div>
        <div class=”am-checkbox”>
            <div class=”am-checkbox”>
                <label><input data-g=”g_1″ type=”checkbox” name=”chi” value=”5″> 管理員列表</label>
            </div>
        </div>
        <div class=”am-checkbox”>
            <div class=”am-checkbox”>
                <label><input data-g=”g_1″ type=”checkbox” name=”chi” value=”6″> 角色列表</label>
            </div>
        </div>
        <div class=”am-checkbox”>
            <div class=”am-checkbox”>
                <label><input data-g=”g_1″ type=”checkbox” name=”chi” value=”8″> 許可權列表</label>
            </div>
        </div>
    </div>
</div>

上面的是動態生成的html
下面js程式碼
$(function(){

    //父級選擇框

    $(`input[name=”par”]`).change(function(){

        if($(this).prop(`checked`) == true){

            $(this).parent().parent().find(`input`).prop(`checked`,true);

        }else{

            $(this).parent().parent().find(`input`).prop(`checked`,false);

        }

    });

    //子級選擇框

    $(`input[name=”chi”]`).change(function(){

        var param_a = $(this).attr(`data-g`);

        var param_b = [];

        var param_c = [];

        var param_d,param_e;

        //獲取當前父級下面所有子集集合

        $(`#` + param_a + ` input[name=”chi”]`).each(function(){

            var all = $(this);

            param_c.push(all.val());

        });

        param_d = param_c.length;

        //獲取當前父級下面選中的子集集合

        $(`#` + param_a + ` input[name=”chi”]:checked`).each(function(){

            var selected = $(this);

            param_b.push(selected.val());

        });

        param_e = param_b.length;

        if(param_d == param_e){

            $(this).parent().parent().parent().parent().find(`input[name=”par”]`).prop(`checked`,true);

        }else{

            $(this).parent().parent().parent().parent().find(`input[name=”par”]`).prop(`checked`,false);

        }

        console.log(`selected==    `+param_b);

        console.log(`all==    `+param_c);

    });

});

第一種：重點來了，上面判斷邏輯是：判斷當前父級下的選中的子集集合長度是否等於當前父級下的子集集合長度。
param_d == param_e
為什麼要判斷陣列長度而不是直接判斷陣列呢？
第二種：判斷陣列簡單的辦法如下，這種方法只能判斷英文字母，不能帶有數字，動態生成的html標籤帶有數字
JSON.stringify(param_c) === JSON.stringify(param_b)
兩種方法都可以實現，用最簡單的方法來寫