如何使用JQUERY实现页面刷新后保留复选框状态？

原代码存在的问题 #

• 选择器不匹配：HTML中复选框的id是actif，但JS中使用了$('#check')，无法正确选中目标元素
• 存储值类型问题：localStorage仅支持存储字符串，直接读取的"true"/"false"字符串无法直接作为prop('checked')所需的布尔值使用
• 语法错误：代码中存在多余的});，会导致JS执行报错

修正后的完整代码 #

HTML

<td>  
  <input type="checkbox" name="check" class="checkbox" id="actif" data-articles="${obj.articles}" value="${obj.actif}">
</td>

jQuery

// 页面加载完成后执行
$(function() {
  // 把localStorage存储的字符串转为布尔值
  let isChecked = localStorage.getItem("checkedbox") === "true";
  $('#actif').prop('checked', isChecked);

  // 监听复选框点击，同步状态到localStorage并提交表单
  $('#actif').on('click', function() {
    localStorage.setItem("checkedbox", $(this).prop('checked'));
    $('form').submit();
  });
});

关键说明 #

• 选择器匹配：确保JS选择器与HTML元素的id完全一致，这里对应#actif
• 类型转换：通过=== "true"将存储的字符串值转为布尔值，保证复选框状态设置准确
• DOM就绪执行：用$(function(){ ... })包裹代码，避免因DOM未加载完成导致找不到元素的问题

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