checkbox選中後刷新頁面選中狀態不清空

$(function () {
    var dv = document.getElementById('test'), cbs = dv.getElementsByTagName('input');
    dv.onclick = function (e) {
        e = e || window.event;
        var o = e.target || e.srcElement;
        if (o.type == 'checkbox') {
            var vs = '';
            for (var i = 0; i < cbs.length; i++)
                if (cbs[i].checked) vs += ',' + cbs[i].value;
            document.cookie = 'vs=' + vs.substring(1);//存儲選中的checkbook的值
        }
    }
    var m = /(^| |;)vs=([^;]+)/.exec(document.cookie);
    if (m) {//cookie中有值，初始化勾選狀態
        var arr = m[2].split(',');
        for(var j=0;j<arr.length;j++)
        for(var i=0;i<cbs.length;i++)
            if (cbs[i].value == arr[j]) { cbs[i].checked = true; break;}
    }
})

 

<script defer="defer" src="ckeckBoxReload.js"></script>

注：有時候會有頁面控制檯輸出有值爲HTMLcollection類型可是length獲取爲空的狀況，這個時由於dom沒有加載完成就去獲取它的屬性致使的須要在引入該js時加入defer=「defer」來控制  可是這個只能用於外部引入方式