【问题标题】:(jQuery) Save checkbox state on click in cookie(jQuery) 单击 cookie 时保存复选框状态
【发布时间】:2023-04-06 10:07:01
【问题描述】:

关于这个功能有很多话题,但我似乎无法让它工作。我已经用谷歌搜索了这个具体案例,一堆链接让我在这里,但奇怪的是我似乎无法让它们工作。我所做的唯一工作是: http://dl.dropbox.com/u/2238080/a/!old/z.htm 但正如你所看到的,它不存储框的状态为未选中。

问候, 鲁本

【问题讨论】:

  • 那个 Dropbox 链接给出了 404。像 JSFiddle 这样的东西会对以后出现的人有所帮助。

标签: javascript jquery html forms jquery-cookie


【解决方案1】:

它应该适用于 jQuery .attr("checked") 的每个外观更改为 .prop("checked")

编辑:更改了检查 cookie 的 if 条件

        function remember( selector ){
            $(selector).each(
                function(){
                    var name = $(this).attr('name');
                    if( $.cookie( name ) && $.cookie(name)=="true" ){
                        $(this).prop('checked', true);
                    } else {
                      $(this).prop('checked', false)
                    }
                    $(this).change(
                        function(){
                            $.cookie(name, $(this).prop('checked'), { path: '/', expires: 365 });
                        }
                    );
                }
            );
        }

【讨论】:

    【解决方案2】:

    您可以将所有代码更改为:已编辑以删除不需要的部分。

    $(document).ready( function(){
       // read the current/previous setting
        $("input.box[type=checkbox]").each(function() {
            var name = $(this).attr('name');
            if ($.cookie(name) && $.cookie(name) == "true") {
                $(this).prop('checked', $.cookie(name));
            }
        });
       // event management
        $("input.box[type=checkbox]").change(function() {
            var name = $(this).attr("name");
            $.cookie(name, $(this).prop('checked'), {
                path: '/',
                expires: 365
            });
        });
    });
    

    包括摆脱所有这些:

    $(document).ready( function(){
        remember("[name=1]");
    });
    ...
    

    编辑:不那么冗长的版本:

    $("input.box").each(function() {
        var mycookie = $.cookie($(this).attr('name'));
        if (mycookie && mycookie == "true") {
            $(this).prop('checked', mycookie);
        }
    });
    $("input.box").change(function() {
        $.cookie($(this).attr("name"), $(this).prop('checked'), {
            path: '/',
            expires: 365
        });
    });
    

    工作示例:http://jsfiddle.net/R73vy/

    【讨论】:

    • 我觉得对于那些偶然发现这个寻找答案的人来说值得一提,就像我一样,因为我花了一些研究才意识到这一点(这可能只是我自己的愚蠢,对此我深表歉意),但您需要 jquery.cookie 插件才能使其正常工作。我在这个地址找到了它:raw.github.com/carhartl/jquery-cookie/master/jquery.cookie.js
    • @Skryn 公平点,它作为外部资源在小提琴中,但没有特别指出 - 现在问题中的链接似乎无效。
    【解决方案3】:

    如果您不严格需要使用 cookie,则使用较新的 HTML5 Web 存储(在这种情况下特别是 sessionStorage 对象)比存储在 cookie 中更容易和更好:

    http://www.w3schools.com/html/html5_webstorage.asp

    浏览器支持非常全面:

    http://caniuse.com/#search=sessionstorage

    【讨论】:

      【解决方案4】:

      如果您只对一个复选框感兴趣并且/或者您不想为此包含 jQuery cookie 插件,这里有两行代码:

      //on page load set the checkbox to stored value or default to true
      $('#turbo').prop('checked' , ( typeof sessionStorage.turbo !== 'undefined' ) ? (sessionStorage.turbo=='true') : true ); 
      //when checkbox is updated, update stored value
      $('#turbo').change( function() { sessionStorage.turbo = $(this).prop('checked');  }); 
      

      这也不使用 cookie,因此节省了几个字节的带宽。更改为 localStorage 以延长已保存选择的生命周期。

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 2012-02-19
        • 2018-06-17
        • 2012-04-18
        • 2018-01-26
        • 2012-10-23
        • 2017-12-25
        • 1970-01-01
        相关资源
        最近更新 更多