从 cookie 中读取多个复选框值答案

【问题标题】：Reading multiple checkbox value from cookie从 cookie 中读取多个复选框值
【发布时间】：2012-11-06 04:05:43
【问题描述】：

我可以使用下面的 jquery 函数为复选框设置 cookie。我正在使用 map 函数将值读取到 cookie 中，并且 cookie 会自动保存。

但我无法读取 cookie 并在页面刷新时设置复选框值。我需要根据 cookie 值将复选框设置为选中/未选中。提前致谢。

HTML 代码

<input type="checkbox"  id="Option1" name="Option1" />
<input type="checkbox"  id="Option2" name="Option2" />
<input type="checkbox"  id="Option3" name="Option3" />
<input type="checkbox"  id="Option4" name="Option4" />
<input type="checkbox"  id="Option5" name="Option5" />

jQuery 部分

var $checkboxes;
//set the cookie
function setcookie() {
    var options= $checkboxes.map(function() {
        if (this.checked) return this.name;
    }).get().join(',');
   $.cookie('new_cookie', options);

}

$(function() {
    $checkboxes = $('input:checkbox').change(setcookie);

});

【问题讨论】：

这个功能是否正常：$checkboxes = $('input:checkbox').change(setcookie);
是的..我设置了警报($.cookie('the_cookie'));在页面加载时，它会显示 cookie 值（Option1、Option3 等），但未选中复选框

标签： javascript jquery attributes checkbox

【解决方案1】：

要选择相应的复选框试试这个：

 var chk = $.cookie('the_cookie');

 $('#'+chk).prop('checked','checked');

或

$("'#"+chk+"'").prop('checked','checked');

没有尝试过，只是假设这可能会有所帮助。

【讨论】：

【解决方案2】：

即使浏览器关闭或在多选项卡中，也可以延长 cookie 的持续时间。试试

var $checkboxes;
//set the cookie
function setcookie() {
    var options= $checkboxes.map(function() {
        if (this.checked) return this.name;
    }).get().join(',');
   $.cookie('new_cookie', options,{expires:1});

}

$(function() {
    $checkboxes = $('input:checkbox').change(setcookie);

});

在加载或刷新页面后使用

var alreadySetCookies= $.cookie('new_cookie').split(',');

for(var $cookie in alreadySetCookies) {
        $("input[name='" + alreadySetCookies[$cookie] + "']").attr("checked", "checked");
}

【讨论】：

【解决方案3】：

试试这个：

var $checkboxes = $('input:checkbox');

//set the cookie
function setcookie() {
    var options = $checkboxes.map(function () {
        if (this.checked) return this.name;
    }).get().join(',');
    $.cookie('new_cookie', options);
}

$checkboxes.change(setcookie);

$(document).ready(function () {

    var values = $.cookie('new_cookie').split(',');
    $checkboxes.prop('checked', false);
    for(var $v in values) {
        $("input[name='" + values[$v] + "']").prop('checked', true);
    }
});

【讨论】：