Question

我是jquery的新手，我想知道你是否可以帮助我。我正在设置一个网页，从.json文件导入前100个imdb列表，并从另一个.json文件中导入详细信息。我已经设法做到这一点，但我很难使用我的所有复选框本地存储。我希望能够通过点击复选框存储我看过的电影，我希望页面能够再次记住。我也是stackoverflow的新手，所以我希望我做得对。

到目前为止，这是我的jquery代码！

$(document).ready(function() {

    $.getJSON('movies.json', function(result) {
        $.each(result, function(index, movie){
            $.getJSON('details/' + movie.id + '.json', function(details) {

                $('#movies').append("<div class='movie' id='" + movie.id +"'>" +
                '<p><input type="checkbox" class="checkbox" id='+ movie.id + ' name="myCheckbox"/> <p id=' 
                + movie.id + '><p class="movietitle" id ='+ movie.id +'>'+ movie.title +'</p></p></p>' +

                        "<div class='info' id='" + movie.id +"'>" +
                            '<p> Country:' + details.country + '</p>' +     
                            '<p> Year:' + details.year + '</p>' + 
                            '<p> Rating:' + details.rating + '</p>' +
                            '<p> Languages:' + details.languages + '</p>' +
                            '<p> Rating:' + details.rating + '</p>' +
                            '<a class="imdb" href =" '+ details.imdburl + ' ">Skoðaðu myndina á imdb</a>' + 
                        "</div>" +  
                    "</div>"
                    );
            });
        });
    });
});

Answer 1

抱歉，阅读后不得不重写这个，并意识到我错了一点，可以简化这一点。你几乎就在那里，但不是id ='movie.id'（或者除此之外）以使它更容易，那应该是value ='movie.id'。

所以：

<input type="checkbox" class="checkbox" value='+ movie.id + ' name="myCheckbox"/>

如果你想在任何时候检查/取消选中某个值，然后存储它：

$("input[type='checkbox']").change(function(){

 var movieIDs = $("input:checkbox:checked").map(function(){
   return $(this).val();
}).get();

 localStorage['movieList'] = JSON.stringify(movieIDs);

});

然后当你想要检索：

var movieList = JSON.parse(localStorage["movieList"]);

例如，要在加载时显示已检查/已查看的电影：

var movieList = (localStorage["movieList"]) ? JSON.parse(localStorage["movieList"]) : [];

$("input[type='checkbox']").each(function(){
    if($.inArray($(this).attr('id'), movieList) >= 0)
    {
        $(this).attr('checked', true);
    }           
});

请在此处查看JSFiddle（已更新）：http://jsfiddle.net/thespacebean/SdcLr/5/

现在，如果您重新加载页面，您之前的选择仍会显示。

Jquery localstorage复选框

1 个答案: