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

页面刷新后，我无法保持选中的复选框。

最佳答案

为此，您需要使用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