Chrome 未将复选框设置为在页面加载时选中

Question

我有一个页面可以根据选中的复选框过滤列表。每个复选框上的单击事件使用来自复选框的表单数据和 returns 筛选项对服务器进行 ajax 调用。这是一个简单的页面，因此当用户移动到另一个页面时所有设置都会丢失。

我想记住 cookie 中的复选框表单数据，并且在页面加载时想要读取该 cookie 以查询服务器以获取新数据并将相关复选框设置为 'checked'。

为此，我修改了复选框单击事件以将表单数据写入 cookie 以及调用服务器以获取结果。这很好用。

我还编写了一个 jQuery 函数，在 document.ready 之后页面加载时调用该函数来读取该 cookie。这在 FireFox 和 Edge 中运行良好，但在 Chrome 中则完全不可靠；该列表始终被过滤（ajax 根据 cookie 值调用 returns 数据）但复选框有时 checked 有时未选中。

cookie中的数据是这样存储的：

industrySectors=1695&apples=4135&oranges=2141&pears=2136

这是函数（在 FF 和 Edge 中可以，但 Chrome 不行）。

function SetMemberListFilterFromCookie() {
    if ($(".MemberListPage").length > 0) {
        var cookieValue = readCookie("searchFilterCookie"));
        if (cookieValue) {
            getMembers(cookieValue); 

            var array1 = cookieValue.split("&");
            var array2 = [];
            for (var i = 0; i <= array1.length - 1; i++) {
                array2.push(array1[i].split("="));
            }
            // This section seems to be an issue in CHROME
            // Checkboxes are not always checked on page load
            for (var c = 0; c < array2.length; c++) {
                var id = array2[c][0] + "-" + array2[c][1];
                $("#" + id).prop("checked", true);
            }
            
            // checkbox panels are initially hidden on page
            // if any checkboxes within a filterPanel have been checked, the filterPanel is opened.
            var filterPanels = $(".filter-panel ul");
            filterPanels.each(function() {
                var checked = $(this).find("input:checked");
                if (checked.length > 0) {
                    animateFilterSection($(this).prev());
                }
            });
        }
    }
}

function animateFilterSection(btn) {
    btn.next("ul").slideToggle({
        duration: 100,
        complete: function() {
            btn.toggleClass("plus minus");
        }
    });
}

function readCookie(name) {
    var nameEQ = encodeURIComponent(name) + "=";
    var ca = document.cookie.split(";");
    for (var i = 0; i < ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0) === " ")
            c = c.substring(1, c.length);
        if (c.indexOf(nameEQ) === 0)
            return decodeURIComponent(c.substring(nameEQ.length, c.length));
    }
    return null;
}

有人知道 Chrome 出了什么问题吗？ cookie 是正确的方法吗？

Answer 1

我设法使上述代码在所有浏览器中一致工作的唯一方法是将 for 循环更改为：

    for (var c = 0; c < array2.length; c++) {
        var id = array2[c][0] + "-" + array2[c][1];
        $("#" + id).attr("checked", true);
        $("#" + id).prop("checked", true);
    }

感觉有点老套，但仅使用 $("#" + id).prop("checked", true); 拒绝在 Chrome 中始终如一地工作。

Chrome 未将复选框设置为在页面加载时选中

Chrome not setting checkboxes to checked on page load

javascript

cookies

jquery