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()函数中，this指的是文档，而不是复选框，就像在$(':checkbox').click()中一样。另外，如果您考虑一下，您确实需要一种方法来遍历您的复选框。这就是.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/上阅读出色的 Try jQuery教程

于 2013-03-08T23:20:57.350 回答