为什么localstorage多切换状态代码在jsfiddle中起作用但在我的网页上不起作用？

Question

在最后一个问题中，我协助创建了一个代码来保存相当复杂的切换状态的状态。选择单选按钮时，一个复选框会向下滑动；选择该复选框时，另一个复选框会向下滑动。反之亦然。我不了解很多代码。现在的问题是，它可以在jsfiddle中完美地工作。

https://jsfiddle.net/tomik23/ovysmutL/7/

但是，它在我的网页上不起作用。刷新页面后，当localstorage将状态恢复到网页时，它会在加载后大约2秒钟自动取消选中该复选框，而该复选框应保持选中状态。

我彻底剥离了页面以尝试找出此问题...问题仍然存在。我阅读并尝试了所有类似的stackoverflow问题，例如（修改表单，添加了doc ready函数等）...但是显然它们都没有帮助。

该代码在插入本地存储之前起作用。刷新页面时，localstorage将状态恢复到网页，但在加载后大约2秒钟时，如果复选框应该保持选中状态，它将自动“取消选中”复选框。有人知道发生了什么事以及如何解决此问题吗？我非常感谢您的帮助。

   **HTML**

    <form class="form" id="form-a" method="post" autocomplete="on">
    <fieldset>
      <div>
        <p>
          <label class="yes_text">Yes</label>
          <span>
            <input type="radio" data-show="next-a" id="dog" name="answer_name" value="yes">
          </span>
        </p>
        <p>
          <label>No</label>
          <span>
            <input type="radio" name="answer_name" value="no" checked>
          </span>
        </p>
      </div>
    </fieldset>
    <fieldset id="next-a" class="hidden">
      <div class="red">
        <div>
          <p>Include Red Dogs:</p>
        </div>
        <div>
          <p>
            <label class="yes_text_include">select to include</label>
            <span>
              <input type="checkbox" data-show="next-b" id="cat" class="red" name="red_name" value="">
            </span>
          </p>
        </div>
      </div>
      <div id="next-b" class="hidden">
        <div>
          <p>Include Green Dogs:</p>
        </div>
        <div>
          <p>
            <label>select to include</label>
            <span>
              <input type="checkbox" name="green_name" class="cat" value="">
            </span>
          </p>
        </div>
        <div>
          <p>
            <label>select to include</label>
            <span>
              <input type="checkbox" name="blue_name" class="cat" value="">
            </span>
          </p>
        </div>
      </div>
    </fieldset>
  </form>

  <form class="form" id="form-b" method="post" autocomplete="on">
    <fieldset>
      <div>
        <p>
          <label class="yes_text">Yes</label>
          <span>
            <input type="radio" data-show="next-a" id="dog" name="answer_name" value="yes">
          </span>
        </p>
        <p>
          <label>No</label>
          <span>
            <input type="radio" name="answer_name" value="no" checked>
          </span>
        </p>
      </div>
    </fieldset>
    <fieldset id="next-a" class="hidden">
      <div class="red">
        <div>
          <p>Include Red Dogs:</p>
        </div>
        <div>
          <p>
            <label class="yes_text_include">select to include</label>
            <span>
              <input type="checkbox" data-show="next-b" id="cat" class="red" name="red_name" value="">
            </span>
          </p>
        </div>
      </div>
      <div id="next-b" class="hidden">
        <div>
          <p>Include Green Dogs:</p>
        </div>
        <div>
          <p>
            <label>select to include</label>
            <span>
              <input type="checkbox" name="green_name" class="cat" value="">
            </span>
          </p>
        </div>
      </div>
    </fieldset>
  </form>



  **Javascript**

    class CheckForm {
  constructor(option) {
    const forms = document.querySelectorAll(`${option}`);
    forms.forEach(form => {
      const formname = form.id;
      this.formCheck(formname);
      this.checkChecked(formname);
    });
  }

  formCheck(formName) {
    const form = document.querySelector(`#${formName}`);
    form.addEventListener('click', e => {
      const { target: { type, value, id, dataset: { show } } } = e;

      switch (type) {
        case 'radio': {
          if (value === 'yes') {
            $(`#${formName}`).find(`#${show}`).show(200);
            this.saveToLocalstore(formName);
          } else {
            $(`#${formName} fieldset`).next().hide(200);
            document.querySelector(`#${formName}`).reset();
            localStorage.removeItem(formName);
            this.removeAllChecked(formName);
          }
          break;
        }
        case 'checkbox': {
          $(`#${formName}`).find(`#${show}`).toggle(200);
          this.saveToLocalstore(formName);
          if (id) {
            this.removeAllChecked(formName, id);
          }
          break;
        }
        default:
          break;
      }
    });
  }

  saveToLocalstore(formName) {
    let allInput = document.querySelectorAll(`#${formName} input`);
    let object = {};
    allInput.forEach(item => {
      object[item.name] = item.type === 'radio' ? true : item.checked;
    });

    localStorage.setItem(formName, JSON.stringify(object));
  }

  checkChecked(formName) {
    const data = JSON.parse(localStorage.getItem(formName));
    if (data) {
      let i = 1;
      for (let [key, value] of Object.entries(data)) {
        const item = document.querySelector(`#${formName} input[name='${key}']`);
        setTimeout(() => {
          if (value) {
            item.click();
          }
        }, i * 1000);
        i++;
      }
    }
  }

  removeAllChecked(formName, id) {
    if (id) {
      let allInput = document.querySelectorAll(`#${formName} .${id}`);
      allInput.forEach(item => {
        item.checked = false;
      });
    } else {
      const allHidden = document.querySelectorAll(`#${formName} .hidden`);
      allHidden.forEach(item => {
        item.removeAttribute('style', '');
      });
    }
  }

}

new CheckForm('.form');



 **CSS**

    .hidden {
  display: none;
}