Question

以下内容用于保存我的复选框的状态，然后在我的load__()函数中调用时将保存的项目设置回选中状态；但是，我需要不仅仅是设置为checked，还需要在.click()函数中通过load__()来实现它们，因为否则就不会提供数据。

  function checkSaver() { 
      user = JSON.parse(localStorage.getItem(user));

      var inputs = document.querySelectorAll('input[type="checkbox"]');
      user.userAchkData = [];

      inputs.forEach(function(input){
        user.userAchkData.push({ id: input.id, checked: input.checked });
      });

      localStorage.setItem(username, JSON.stringify(user));
      console.log(JSON.stringify(user));

    }

    function load_() { 
      // get saved latest checkbox states, recheck
      user = JSON.parse(localStorage.getItem(user));
      var inputs = user.userAchkData;

      inputs.forEach(function(input){ 
        if (input.id) { 
            // I need to click through the found checked here
            document.getElementById(input.id).checked = input.checked; 
        }
      });

Answer 1

您可以检查是否已选中它们，然后以编程方式触发点击：

if (input.id) { 
   // I need to click through the found checked here
   const element = document.getElementById(input.id);
   element.checked = input.checked; 
   if (input.checked) element.click();
}

我摆弄了一下，找到了一个简单的工作示例来检查已保存的复选框。也许您可以根据自己的需要进行调整：

const container = document.getElementById('checkboxes');
const data = JSON.parse(localStorage.getItem('checkboxes')) || new Array(3).fill(false);

window.addEventListener('DOMContentLoaded', () => {
  [...container.children].forEach((child, i) => { child.checked = data[i]; });
});

container.onchange = ({ target }) => {
  data[target.dataset.id] = target.checked;
  localStorage.setItem('checkboxes', JSON.stringify(data));
};

<div id="checkboxes">
<input type="checkbox" data-id="0">
<input type="checkbox" data-id="1">
<input type="checkbox" data-id="2">
</div>

单击已保存的复选框状态

1 个答案: