javascript - 如何在页面重新加载后保持复选框选中状态？

Question

刷新页面后，我无法保持复选框处于选中状态。

Answer 1

为此，您需要使用 cookie...一旦用户单击复选框，将其状态存储到 cookie 中，然后在页面加载时获取 cookie 值，以预先填充复选框，就像它们在之前的选择中一样。

HTML

<div>
  <label for="option1">Option 1</label>
  <input type="checkbox" id="option1">
</div>
<div>
  <label for="option2">Option 2</label>
  <input type="checkbox" id="option2">
</div>
<div>
  <label for="option3">Option 3</label>
  <input type="checkbox" id="option3">
</div>
<button>Check all</button>

获取复选框值并从中创建 cookie

var checkboxValues = {};
$(":checkbox").each(function(){
  checkboxValues[this.id] = this.checked;
});
$.cookie('checkboxValues', checkboxValues, { expires: 7, path: '/' })

读取 cookie 并在加载时预填充的函数

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

Working Fiddle