Question

我有几个复选框需要在页面刷新后保持检查状态。但是他们或者需要全部检查以便在刷新后保持检查，如果只检查了几个，则刷新后不会保持检查。

关于如何修复它的任何想法？

<!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

在每个输入上保留课程，但如果您希望在存储对象中使用独特的内容，还要为每个输入提供一个唯一的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">

然后，您仍然可以按类别一次选择元素，但使用.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

问题是班级名称。由于所有复选框都具有相同的类。此行checkboxValues[this.className] = this.checked;最后只有一个条目，{'option' : true}如果最后一个条目被{'option' : false}检查。

在下面的代码片段中，我使用数组和元素索引来保持状态。

＆＃13;

$.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);
  });
});

＆＃13;

<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">

＆＃13;

Answer 3

你的jquery是从谷歌网站加载的。所以加载完成事件的js事件，你编码这些代码应该留在window.load事件中它确实有效

window.load = function（）{

     //your performing code

}

页面刷新后复选框保持检查状态

3 个答案: