5

私はここにこのような20のチェックボックスのコレクションを持っています：

<div class="cbcell">
<input type="checkbox" class="checkbox" id="home_swimming_pool" name="Basen" value="35"> Basen 
</div>
<div class="cbcell">
<input type="checkbox" class="checkbox" id="home_sauna" name="Sauna" value="45"> Sauna 
</div>

次のコードを使用して、ローカルストレージのチェックボックスの状態を保存および削除しています。これは非常に正常に機能し、dataTablesのフィルター機能も正常に機能します。

<script type="text/javascript" > 
$(':checkbox').click(function(){
        var name = $(this).attr('name');
        var value = $(this).val();

          if($(this).is(':checked')){

          console.log( name, value ); // <- debug  
          oTable.fnFilter(name, value,false,true,false,true);
             localStorage.setItem(this.name,'checked');

          } else {
          console.log( name, value ); // <- debug 
             oTable.fnFilter('',value,false,true,false,true);
             localStorage.removeItem(this.name);
          }
        //})
        });
</script>

ページのリロード後に各チェックボックスの状態を取得する方法を教えてください。私はすでにいくつかの機能でそれを試しました、そして私の最後の立場は：

$(document).ready(function() {

                      if (localStorage.getItem(this.value) == 'checked'){
                          $(this).attr("checked",true)
                      }

                    })

どんな助けでも大歓迎です。

4

1 に答える 1

6

これを試して

$(':checkbox').each(function() {
    $(this).prop('checked',localStorage.getItem(this.name) == 'checked');
});

$（document）.ready（）関数で、 $（'：checkbox'）。click（）のthisようにチェックボックスではなく、ドキュメントを参照します。さらに、考えてみると、チェックボックスを繰り返す方法が本当に必要です。ここで.each（）が登場します。$（'：checkbox'）。each（）関数内で、特定のチェックボックスを参照しますthis

また、localStorageがコードを実行しているブラウザで実際にサポートされていることを確認することをお勧めします。サポートされていない場合、エラーが発生します。

簡単な方法は、すべてをif (window.localStorage) { /* code here */}

改善されたバージョン

if (window.localStorage) {
    $('.cbcell').on('click',':checkbox',function(){
        var name = this.name;
        var value = this.value;

          if($(this).is(':checked')){
             oTable.fnFilter(name, value,false,true,false,true);
             //shorthand to check that localStorage exists
             localStorage && localStorage.setItem(this.name,'checked');

          } else {
             oTable.fnFilter('',value,false,true,false,true);
             //shorthand to check that localStorage exists
             localStorage && localStorage.removeItem(this.name);
          }
    });


    $(document).ready(function () {
        $(':checkbox').each(function() {
            $(this).prop('checked',localStorage.getItem(this.name) == 'checked');
        });
    });
}

最後に、http：//try.jquery.com/で優れたTryjQueryチュートリアルを実行することをお勧めし ます。

于 2013-03-08T23:20:57.350 に答える