問題描述

1.最近用layui做後臺介面，遇到layui跟ajax資料動態載入的checkbox，偶爾不能正常勾選，取消

2.有分頁時，最後一頁資料過少會導致其他頁下方資料無法選中

3.頁面沒載入完或暴力測試時也會不能選中

利用layui更新渲染方法和網上的一些方法去解決後極大的減少了無法選中的情況，但是暴力測試時偶爾還會出現，實在不知道什麼原因，所以就用了一個折中的方法——自己寫一個複選框

<!--原有layui複選框-->
<td>
    <div class="layui-unselect layui-form-checkbox" lay-skin="primary" data-id='2'><i class="layui-icon">&#xe605;</i></div>
</td>
<!--替換為自己寫的-->
<td>
    <div a="off" class="checkBox" v-bind:data-id='x.Id' v-on:click="checkBox(i)">
        <div></div>
    </div>
</td>

 自己寫的同樣支援vue繫結事件，並且支援單個選中、取消，全選和取消

//單個的選中取消 

checkBox:function(n){
    var checkbox = $('tbody tr').eq(n).find('.checkBox');
    if (checkbox.attr("a") == "off") {
        checkbox.children("div").css({
            "display" : "block"
        });
        checkbox.attr("a","on");
    }else {
        checkbox.children("div").css({
            "display" : "none"
        });
        checkbox.attr("a","off");
    }
}

 //全選取消

checkBoxAll:function(){
    var obj = $('thead').find('.checkBox');
    if ($(obj).attr("a") == "off") {
        $('.checkBox div').css({"display" : "block"});
        $('.checkBox').attr("a","on");
    }else {
        $('.checkBox div').css({"display" : "none"});
        $('.checkBox').attr("a","off");
    }
}

全選或者選中其中幾個，獲取對應id，刪除或進行其他操作

function getId() {
    var obj = $("tbody .checkBox");
    var arr='';
    obj.each(function(index, el) {
        if(obj.eq(index).attr("a") == "on"){
            arr += obj.eq(index).attr('data-id')+ ','
        }
    });
    return arr;
}