1

所以。我有一个带有很多复选框的表单。除此之外，我还有一段 javascript 代码应该在用户按下提交时保存每个复选框的状态。我的短而恼人的问题是两件事。问题：我只想在提交表单时将复选框状态保存到 cookie，现在如果我标记复选框并重新加载页面而不提交，它会保存。我正在使用 Javascript 和 Cookies，这两件事我很陌生。所以我非常感谢所有的帮助。这是我从这里得到的代码：

function getStorage(key_prefix) {
    if (window.localStorage) {
        return {
            set: function(id, data) {
                localStorage.setItem(key_prefix+id, data);
            },
            get: function(id) {
                return localStorage.getItem(key_prefix+id);
            }
        };
    } else {
        return {
            set: function(id, data) {
                document.cookie = key_prefix+id+'='+encodeURIComponent(data);
            },
            get: function(id, data) {
                var cookies = document.cookie, parsed = {};
                cookies.replace(/([^=]+)=([^;]*);?\s*/g, function(whole, key, value) {
                    parsed[key] = unescape(value);
                });
                return parsed[key_prefix+id];
            }
        };
    }
}

jQuery(function($) {
    var storedData = getStorage('com_mysite_checkboxes_'); 

    $('div.check input:checkbox').bind('change',function(){
        storedData.set(this.id, $(this).is(':checked')?'checked':'not');
    }).each(function() {
        var val = storedData.get(this.id);
        if (val == 'checked') $(this).attr('checked', 'checked');
        if (val == 'not') $(this).removeAttr('checked');
        if (val == 'checked') $(this).attr('disabled','true');
        if (val) $(this).trigger('change');
    });

});

所以我想基本上只在提交时保存到cookie。

4

1 回答 1

4

绑定到submit表单的change事件而不是所有复选框的事件。

试试这个代替你的第二个功能：

jQuery(function($) {
    // bind to the submit event of the form
    $('#id-of-your-form').submit(function() {
        // get storage
        var storedData = getStorage('com_mysite_checkboxes_');

        // save checkbox states to cookie
        $('div.check input:checkbox').each(function() {
            // for each checkbox, save the state in storage with this.id as the key
            storedData.set(this.id, $(this).is(':checked')?'checked':'not');
        });
    });

});

jQuery(document).ready(function() {
    // on load, restore the checked checkboxes
    $('div.check input:checkbox').each(function() {
        // get storage
        var storedData = getStorage('com_mysite_checkboxes_');

        // for each checkbox, load the state and check it if state is "checked"
        var state = storedData.get(this.id);

        if (state == 'checked') {
            $(this).attr('checked', 'checked');
        }
    });
});
于 2013-06-18T19:08:22.363 回答