如何设置Cookie值为复选框的选中状态布尔值

安全阿岳

2026-9-1

实现方法

要让Cookie值和复选框选中状态同步，只需要在事件触发时读取复选框的checked布尔属性，拼接为Cookie值即可，同时补充页面加载时的Cookie读取回显逻辑，完整实现如下：

修改后的完整JS代码

// 绑定复选框状态变更事件，用change比click更兼容键盘操作等场景
document.getElementById("example").addEventListener("change", exampleCookie);

function exampleCookie() {
  const checkbox = document.getElementById("example");
  // 读取当前复选框选中状态，拼接为Cookie字符串
  // path=/ 配置保证站点下所有页面都能读取到该Cookie，可按需添加max-age配置过期时间
  document.cookie = `exampleCookie=${checkbox.checked}; path=/`;
}

// 页面加载时读取Cookie，回显复选框状态
window.addEventListener("DOMContentLoaded", () => {
  const cookieArr = document.cookie.split('; ');
  const targetCookie = cookieArr.find(item => item.startsWith('exampleCookie='));
  if (targetCookie) {
    const checkedValue = targetCookie.split('=')[1] === 'true';
    document.getElementById("example").checked = checkedValue;
  }
  // 初始化触发一次，保证首次加载页面时Cookie和初始状态同步
  exampleCookie();
});