使用javascript保存复选框值的简单方法？ [英] Save checkbox value with javascript the easy way?

问题描述

我有几个问题。我的JavaScript /编码游戏仍然是非常入门的人，我不了解该网站上已经存在的保存复选框的值问题。

I got a couple of questions. My javascript/coding game is still a very VERY beginner I don't understand the 'save checkbox value' questions that are already on this site.

我认为解决方案非常简单，但是我有几个问题。

I think the solution is really simple, but there are a couple of questions I have.

让我解释我的想法/问题：
因为我想通过向我在angularJS网站上找到的现有脚本中添加新功能来学习JavaScript，所以我偶然发现了一些我自己不知道的事情。

Let me explain my idea/problem: Since I'm trying to learn javascript by adding new functions to an existing script I've found on the angularJS website I stumbled on some things I couldn't figure out myself.

我有此复选框列表，并想保存复选框输入。访问页面时，复选框均为空。当我选中其中一个框时，我得到了这个小消息，说的是做得好！。当我刷新页面时，该框再次为空。我想保存用户输入，以便复选框保持选中状态。

I've got this list of checkboxes and want to save the checkbox input. When visiting the page the checkboxes are all empty. When I check one of the boxes I got this little msg saying something like 'well done!'. When I refresh the page the box is empty again. I want to save the user input so the checkbox stays checked.

我的代码：
HTML：

My code: HTML:

          <div ng-controller="TodoListController as todoList">         
        <span>Nog {{todoList.remaining()}} van de {{todoList.todos.length}} te gaan!</span>
        <!--[ <a href="" ng-click="todoList.archive()">archive</a> ]-->
        <ul class="unstyled">
          <div class="column">
          <li ng-repeat="todo in todoList.todos">
            <label class="checkbox">
              <input type="checkbox" onclick="alert('Well done!')" ng-model="todo.done" ng-disabled="todo.done"> 

              <span class="done-{{todo.done}}">{{todo.text}}</span>

            </label>
          </li>
          </div>
        </ul>
      </div> <!--end ng-controller -->

Javascript / AngularJS：

Javascript/AngularJS:

angular.module('todoApp', [])
.controller('TodoListController', function() {
var todoList = this;
todoList.todos = [
  {text:'Leer HTML5', done:true},
  {text:'Leer CSS3', done:true},
  {text:'Leer Javascript', done:false},
  ];

todoList.remaining = function() {
  var count = 0;
  angular.forEach(todoList.todos, function(todo) {
    count += todo.done ? 0 : 1;
  });
  return count;
};

todoList.archive = function() {
  var oldTodos = todoList.todos;
  todoList.todos = [];
  angular.forEach(oldTodos, function(todo) {
    if (!todo.done) todoList.todos.push(todo);
  });
};
});

我读了很多其他人的疑问，我不太理解所有选项为达到这个。我发现了这个小提琴琴代码，正是我想要的代码： http://jsfiddle.net/R73vy /
当我将此代码复制到自己的HTML和js文件中时，它不起作用。此代码使用客户端通过cookie来存储数据。我如何自己使用此工作代码？我想念什么？

I've read a lot of questions other people had and I don't really understand all the options to achieve this. I've found this little Fiddle code which is exactly what I'm looking for: http://jsfiddle.net/R73vy/ When I copy this code in my own Html and js files, it's not working. This code uses the client side to storage data by using cookies. How can I use this working code myself? What am I missing? Is it possible to achieve this with my existing code?

请先感谢您，再请问我是绝对的初学者。
如果您有问题，请告诉我！

Thanks in advance and excuse my level of an absolute beginner. If you got questions, let me know!

推荐答案

您在 jsfiddle.net 使用的是 $。cookie 。这是 jquery +一个 Cookie插件。

The piece script you are referencing on jsfiddle.net is using $.cookie. Which is jquery + a cookie plugin.

出于某些原因，人们倾向于限制Angular对jquery的使用。可以在这里找到关于它的很好的论述："思考在AngularJS中如果我有jQuery背景？

For some reason people prefer to limit usage of jquery with Angular. A good discution about it is available here: "Thinking in AngularJS" if I have a jQuery background?

在您的情况下，我将建议您使用本地存储而不是 Cookie 。此处提供一些解释：本地存储与Cookie

In your case you I will advice you usage of local storage instead of cookie. Some explanations are available here: Local Storage vs Cookies

然后，该想法是安装 angular-local-storage包装 a>通过 npm

Then the idea is to install the angular-local-storage pakage via npm

然后您应该进行更改您的代码应如下所示：

Then you should change your code to something like this:

angular.module('todoApp', [])
  .controller('TodoListController', function(localStorageService) {
  var todoList = this;
  todoList.todos = [
    {text:'Leer HTML5', done:localStorageService.get('todo1'), id:'todo1'},
    {text:'Leer CSS3', done:localStorageService.get('todo2'), id:'todo2'},
    {text:'Leer Javascript', done:localStorageService.get('todo3'), id:'todo2'},
  ];

  todoList.onClickItem = function(todoId) {
    if (localStorageService.get( todoId ) {
      localStorageService.set( todoId, false);
    } else {
      localStorageService.set( todoId, true);
    }
  }

  todoList.remaining = function() {
    var count = 0;
    angular.forEach(todoList.todos, function(todo) {
      count += todo.done ? 0 : 1;
    });
    return count;
  };

  todoList.archive = function() {
    var oldTodos = todoList.todos;
    todoList.todos = [];
    angular.forEach(oldTodos, function(todo) {
      if (!todo.done) todoList.todos.push(todo);
    });
  };
});

并将视图更新为：

<input type="checkbox" onclick="onClickItem('{{todo.todoId}}');" ng-model="todo.done" ng-disabled="todo.done"> 

此代码可能无法立即使用。但这只是显示解决方案的方向。

This code may not work straight away. But that to show the direction to the solution.

这篇关于使用javascript保存复选框值的简单方法？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！