页面刷新后，复选框保持选中状态

Question

I have a few checkboxes that need to stay checked after a page refresh. 我有几个复选框，在页面刷新后需要保持选中状态。 But they or need to be all checked to stay checked after refresh, either if only a few are checked, they don't stay checked after refresh. 但是它们或需要全部检查以在刷新后保持选中状态，或者如果仅选中了少数几个，则刷新后就不会保持选中状态。

Any ideas on how do I fix it? 关于如何解决它的任何想法？

<!DOCTYPE HTML>
<html>
  <head>
    <meta charset="utf-8">
    <title>Persist checkboxes 1</title>
  </head>

  <body>

      <input type="checkbox" class="option">

      <input type="checkbox" class="option">

      <input type="checkbox" class="option">

      <input type="checkbox" class="option">

      <input type="checkbox" class="option">

      <input type="checkbox" class="option">


    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    <script src="http://cdn.jsdelivr.net/jquery.cookie/1.4.0/jquery.cookie.min.js"></script>

    <script>
      $(".option").on("change", function(){
        var checkboxValues = {};
        $(".option").each(function(){
          checkboxValues[this.className] = this.checked;
        });
        $.cookie('checkboxValues', checkboxValues, { expires: 1, path: '/' })
      });

      function repopulateCheckboxes(){
        var checkboxValues = $.cookie('checkboxValues');
        if(checkboxValues){
          Object.keys(checkboxValues).forEach(function(element) {
            var checked = checkboxValues[element];
            $("." + element).prop('checked', checked);
          });
        }
      }

      $.cookie.json = true;
      repopulateCheckboxes();
    </script>
  </body>
</html>

Answer 1

Keep the class on each input, but also give each a unique ID if you wish to have something unique to use in the storage object. 将类保留在每个输入上，但如果希望在存储对象中使用某些唯一的内容，还可以给每个唯一的ID。

  <input type="checkbox" id="opt1" class="option">

  <input type="checkbox" id="opt2" class="option">

  <input type="checkbox" id="opt3" class="option">

  <input type="checkbox" id="opt4" class="option">

  <input type="checkbox" id="opt5" class="option">

  <input type="checkbox" id="opt6" class="option">

You can then still select the elements at once by their class, but use the .id to store the items in the object, and to reset them. 然后，您仍然可以按其类一次选择元素，但是使用.id将项目存储在对象中并进行重置。

  $(".option").on("change", function(){
    var checkboxValues = {};

    $(".option").each(function(){
      checkboxValues[this.id] = this.checked;
    });

    $.cookie('checkboxValues', checkboxValues, { expires: 1, path: '/' })
  });

  function repopulateCheckboxes(){
    var checkboxValues = $.cookie('checkboxValues');

    if(checkboxValues){
      Object.keys(checkboxValues).forEach(function(id) {
        $("#" + id).prop('checked', checkboxValues[id]);
      });
    }
  }

  $.cookie.json = true;
  repopulateCheckboxes();

Answer 2

Problem is class name. 问题是班级名称。 Since all checkboxes have same class. 由于所有复选框都具有相同的类。 This line checkboxValues[this.className] = this.checked; 这行checkboxValues[this.className] = this.checked; ends-up with only one entry ie {'option' : true} if last one is checked else {'option' : false} . 最后只输入一个条目，即{'option' : true}如果选中了最后一个，则否则返回{'option' : false} 。

In below code snippet, I am using array and element index to persist state. 在下面的代码片段中，我正在使用数组和元素索引来保持状态。

 $.cookie.json = true; $(function() { var options = $.cookie('options'); var chkbxs = $('.option'); console.log('options', options); if (options) { $.each(options, function(i, chkd) { chkbxs.eq(i).prop('checked', chkd); }); } chkbxs.on('change', function() { options = chkbxs.map(function(_, chk) { return chk.checked; }).get(); console.log('options', options); $.cookie('options', options); }); });

 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> <script src="http://cdn.jsdelivr.net/jquery.cookie/1.4.0/jquery.cookie.min.js"></script> <input type="checkbox" class="option"> <input type="checkbox" class="option"> <input type="checkbox" class="option"> <input type="checkbox" class="option"> <input type="checkbox" class="option"> <input type="checkbox" class="option">

Answer 3

your jquery is loaded from google website . 您的jQuery是从Google网站加载的。 so the js event of the loaded completing event , you coded these code should stay in window.load event and it does work 因此，已加载完成事件的js事件，您编码的这些代码应保留在window.load事件中，并且可以正常工作

window.load = function () { window.load = function（）{

     //your performing code

} }

页面刷新后，复选框保持选中状态

问题描述

3 个解决方案

解决方案1
1 已采纳

解决方案2
0

解决方案3
-1 2016-02-19 23:48:59

页面刷新后，复选框保持选中状态

问题描述

3 个解决方案

解决方案1 1 已采纳

解决方案2 0

解决方案3 -1 2016-02-19 23:48:59

解决方案1
1 已采纳

解决方案2
0

解决方案3
-1 2016-02-19 23:48:59