0

さまざまなチェックボックスでフィルタリングできるメイン ページのリンクのリストがあります。ユーザーが新しい URL へのリンクの 1 つをクリックしてからこのメイン ページに戻ったときに、すべてのチェックボックスの状態を保持したいと考えています。

修正できないように見える2つの問題があります。

  1. 入力のチェックを外すと、クラスを共有する結果が常に表示されるとは限りません (アプリ内、ストリーム内のチェックを外すと、インバナーの唯一の結果はリンク 1 で、#1 と #3 になるはずです)。
  2. ユーザーの選択を保持するために、すべてのチェック/チェック解除機能を localStorage と連携させることができないようです。多くのことを試してきましたが、何もうまくいきません。

私のコードが完全に一貫していない場合はご容赦ください。新しいことを学び、試しています。ヘルプや提案をいただければ幸いです。

これまでに行ったことは次のとおりです。その一部は、この以前の投稿に基づいています...リロード時にチェックボックスの状態を保存する

ここでフィドル... 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');
});


});​
4

1 に答える 1

0

私は...

// 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');
});
于 2012-04-12T03:08:10.970 に答える