檢索保存的狀態從本地存儲複選框的頁面重載後的集合

我已經得到了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) 
         } 

        })

任何幫助，高度讚賞。

來源

2013-03-08 Barry White

在你的'document.ready'，什麼是'this'？ – 2013-03-08 23:17:51

你已經展示了你所嘗試過的東西，但沒有說出它的作用或者它不以什麼方式爲你工作。你如何知道你的代碼保存和刪除作品？「this.name」的值是什麼，以及爲什麼只有在其他地方使用'name'（AKA'$（this）.attr（'name'）'）時纔會出現在localStorage調用中？後來，'this.value'的價值是什麼？ – 2013-03-08 23:18:49

可愛的名字順便說一句，巴里懷特:) – Dogoku 2013-03-08 23:29:16

試試這個

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

在$（文件）。就緒（）函數，this指的是文件，而不是一個複選框，像$（ '：複選框'）。點擊（）。另外如果你仔細想想，你真的需要一種方法來遍歷你的複選框。這是。每（）進來裏面$（「：複選框」）。每個（）功能，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'); 
     }); 
    }); 
}

最後我可能會建議花一些時間通過優秀Try jQuery教程將包裹一切在http://try.jquery.com/

來源

2013-03-08 23:20:57 Dogoku

檢索保存的狀態從本地存儲複選框的頁面重載後的集合

回答

相關問題