Question

我在主页面上有一个链接列表，可以通过不同的复选框进行过滤。当用户单击指向新URL的链接之一然后返回到此主页时，我希望保留所有复选框的状态。

我有两个我似乎无法解决的问题：

分享课程的结果不会始终显示取消检查输入（取消检查In-App然后In-Stream和唯一 In-Banner的结果是链接1，它应该是＃1和＃3）
我似乎无法使用Check / Uncheck All功能来使用 localStorage以保留用户选择。一直在尝试事情的数量，没有什么对我有用。

如果我的代码不完全一致，请原谅;一直在学习和尝试新事物。任何帮助或建议都表示赞赏。

这是我到目前为止所做的事情，其中一些基于之前的帖子...... saving checkbox state on reload

在这里小提琴...... http://jsfiddle.net/JFlo/689rA/

HTML

<fieldset class="tags">
<p><label><input type="checkbox" id="check-all" class="checkAll" checked /><span>Select All</span></label></p>
<p><label><input type="checkbox" class="filter" id="in-app" checked />In-App</label></p>
<p><label><input type="checkbox" class="filter" id="in-stream" checked />In-Stream</label></p>
<p><label><input type="checkbox" class="filter" id="in-banner" checked />In-Banner</label></p>
</fieldset>

<ul class="results">
<li class="in-banner"><a href="/link/within_site/" >Link 1</a></li>
<li class="in-stream"><a href="/link/within_site/" >Link 2</a></li>
<li class="in-stream in-banner"><a href="/link/within_site/" >Link 3</a></li>
<li class="in-app"><a href="/link/within_site/" >Link 4</a></li>
</ul>

JS

function getStorage(key_prefix) {
// this function will return us an object with a "set" and "get" method
// using either localStorage if available, or defaulting to document.cookie
if (window.localStorage) {
    // use localStorage:
    return {
        set: function(id, data) {
            localStorage.setItem(key_prefix+id, data);
        },
        get: function(id) {
            return localStorage.getItem(key_prefix+id);
        }
    };
} else {
    // use document.cookie:
    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 $inputs = $('input.filter'), $checkall = $('input.checkAll'), $storedData = getStorage('web_checkboxes_');

// Check/Uncheck All events
$checkall.live('change', function(){

    // Change text for Check All box
    $(this).next().text( this.checked ? 'Uncheck All' : 'Check All');

    // Set Input Filter
    $inputs.attr('checked', this.checked ? 'checked' : ''); // This line not working in newer versions of jQuery
    // Toggle visibility of all results
    var $lis = $('.results > li').toggle();

    // Toggle checkboxes
    $lis.toggle($(this).is(':checked'));
});        

// Individual input events
$inputs.live('change', function(){
    // Change text for Check All box
    $inputs.length === $inputs.find(':checked').length 
        ? $checkall.attr('checked', 'checked').next().text('Uncheck All') 
        : $checkall.removeAttr('checked').next().text( 'Check All' );

    $('.results .'+this.id).toggle($(this).is(':checked'));
    $storedData.set(this.id, $(this).is(':checked')?'checked':'not');
    //For each one checked
}).each(function(){
    //var $lis = $j('.results > li').hide();
    //$lis.filter('.' + $j(this).attr('ID')).show();
    var val = $storedData.get(this.id);
    if (val == 'checked') $(this).attr('checked', 'checked');
    if (val == 'not') $(this).removeAttr('checked');
    if (val) $(this).trigger('change');
});


});

Answer 1

我得到了......

// 4/11
$j('.tags').delegate('input:checkbox', 'change', function(){
    var $lis = $j('.results > li').hide();
    $j('input:checked').each(function(){
        $lis.filter('.' + $j(this).attr('ID')).show();
    });
});
// 4/11
$checkall.live('change', function(){
    $storedData.set(this.id, $j(this).is(':checked')?'checked':'not');
    $inputs.attr('checked', this.checked ? 'checked' : '');
    $j(this).next().text( this.checked ? 'Uncheck All' : 'Check All');
    var $lis = $j('.results > li').hide();
    //For each one checked
     $inputs.each(function(){
        $lis.filter('.' + $j(this).attr('ID')).show();
        $storedData.set(this.id, $j(this).is(':checked')?'checked':'not');
        var val = $storedData.get(this.id);
        if (val == 'checked') $j(this).attr('checked', 'checked');
        if (val == 'not') $j(this).removeAttr('checked');
        if (val) $j(this).trigger('change');
    });
});

// 4/11
$inputs.live('change', function(){
    $storedData.set(this.id, $j(this).is(':checked')?'checked':'not');
}).each(function(){
    var val = $storedData.get(this.id);
    if (val == 'checked') {
        $j(this).attr('checked', 'checked');
        $checkall.attr('checked');
    }
    if (val == 'not') {
        $j(this).removeAttr('checked');
        $checkall.removeAttr('checked');
    }
    if (val) $j(this).trigger('change');
});

如何使用本地存储来保留用于过滤项目的复选框状态

1 个答案: