javascript - 单击已保存的复选框状态

Question

下面的代码用于保存复选框的状态，然后在我的 load__() 函数中调用时将保存的项目设置回选中状态；但是我需要的不仅仅是设置为 checked，而是需要在我的 load__() 函数中实际使用它们 .click() 作为否则不会提供数据。

  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>