Question

我有6个复选框，我需要检查最后一个复选框，以便在页面刷新后保持检查状态。

我现在拥有的是保留所有选中的复选框，在页面刷新后检查。

关于如何编辑它以获得所需结果的任何想法？

这是我目前的代码：

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

  <body>

      <input type="checkbox" id="option1">

      <input type="checkbox" id="option2">

      <input type="checkbox" id="option3">

      <input type="checkbox" id="option4">

      <input type="checkbox" id="option5">

      <input type="checkbox" id="option6">


    <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>
      $(":checkbox").on("change", function(){
        var checkboxValues = {};
        $(":checkbox").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(element) {
            var checked = checkboxValues[element];
            $("#" + element).prop('checked', checked);
          });
        }
      }

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

Answer 1

如果您只想保留所选的最后一个复选框，而不是遍历所有复选框并将其存储在Cookie中，只需在每次选中复选框时覆盖Cookie id已选择的内容，然后您的Cookie中始终保留最新的id：

<script>
  $("[id^=option]").on("change", function() {
    if ($(this).prop('checked')) { // This will make sure an ID isn't stored if a checkbox is unchecked.
      $.cookie('checkboxId', this.id, { expires: 1, path: '/' });
    }
  });

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

    if (checkboxId) {
      $("#" + checkboxId).prop('checked', checked);
    }
  }

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

页面刷新后检查最后一个复选框

1 个答案: