如何覆写checkbox的checked属性？实现保存后自定义初始选中状态

要实现这个功能，核心是用浏览器的localStorage存储复选框的选中状态，下次页面加载时再读取并恢复状态。下面是具体的代码和步骤：

1. HTML 结构 #

先搭建复选框和保存按钮的基础结构：

<div>
  <label><input type="checkbox" id="checkbox1" checked> 复选框1</label>
  <label><input type="checkbox" id="checkbox2"> 复选框2</label>
  <label><input type="checkbox" id="checkbox3"> 复选框3</label>
  <button id="saveBtn">保存设置</button>
</div>

这里给第一个复选框加了默认checked，但如果有已保存的状态，后续会自动覆盖这个默认值。

2. JavaScript 逻辑 #

分为页面加载恢复状态和点击保存存储状态两部分：

// 获取页面上的DOM元素
const checkbox1 = document.getElementById('checkbox1');
const checkbox2 = document.getElementById('checkbox2');
const checkbox3 = document.getElementById('checkbox3');
const saveBtn = document.getElementById('saveBtn');

// 页面加载完成后，恢复之前保存的状态
window.addEventListener('load', () => {
  // 从localStorage读取保存的状态，没有则返回null
  const savedStates = localStorage.getItem('checkboxStates');
  if (savedStates) {
    // 把字符串转成JS对象
    const states = JSON.parse(savedStates);
    // 给每个复选框设置对应的选中状态
    checkbox1.checked = states.checkbox1;
    checkbox2.checked = states.checkbox2;
    checkbox3.checked = states.checkbox3;
  }
});

// 点击保存按钮时，存储当前复选框状态
saveBtn.addEventListener('click', () => {
  // 收集所有复选框的当前状态
  const states = {
    checkbox1: checkbox1.checked,
    checkbox2: checkbox2.checked,
    checkbox3: checkbox3.checked
  };
  // 把对象转成字符串存入localStorage（因为localStorage只能存字符串）
  localStorage.setItem('checkboxStates', JSON.stringify(states));
  alert('设置已保存'); // 可选，给用户一个保存成功的提示
});

关键知识点说明 #

• localStorage：浏览器自带的本地存储工具，数据会一直保存在浏览器中（除非用户手动清除），适合存储这类轻量配置信息。
• JSON.stringify()/JSON.parse()：因为localStorage仅支持存储字符串，所以需要把状态对象转成字符串存入，读取时再转回对象。
• window.addEventListener('load', ...)：确保页面所有元素加载完成后再执行恢复逻辑，避免出现找不到DOM元素的错误。

这样操作后，用户调整复选框状态并点击保存，下次打开页面时就会自动恢复上次保存的状态了。

内容的提问来源于stack exchange，提问作者user454973