всплывающее событие с сохраненными состояниями флажков

Question

Я сохраняю состояния ряда флажков в визуализации локального хранилища, как отмечено: true или false, и с этими данными я проверяю эти флажки позже. Все работает по большей части, однако блуждающий флажок становится проверенным , его данные сообщают false, как и должно быть, а другие не должны быть проверенными , но это становлюсь проверенным.

К сожалению, все мои попытки, включая одну, ответили; убейте функциональность, и никакие флажки не станут повторно проверенными.

/................../

        // reset before loading
        var clist = document.querySelectorAll('.k-treeview-lines input[type="checkbox"]');
            for (var i = 0; i < clist.length; ++i) { clist[i].checked = false; 
        }
        // $saved checkbox states, recheck
        const defaultData = {
            userAchkData: []
        };
        const localStorageData = JSON.parse(localStorage.getItem(username));
        let userA = localStorageData || defaultData;
        let inputs = userA[username].userAchkData;

        inputs.forEach(function (input) {
            if (input.checked) {
                var inputElem = document.getElementById(input.id)
                inputElem.click();
            }
            return false; // attempt
        });
    }

Я также попробовал input.stopPropagation()

Вот как я сохраняю флажки, если это полезно:

// Save layer funct, $all current checkbox states user localStorage
    function layerSaver() {
        const defaultData = {
            userAchkData: []
        };
        const localStorageData = JSON.parse(localStorage.getItem(username));
        let userA = localStorageData || defaultData;

        let inputs = document.querySelectorAll('.k-treeview-lines input[type="checkbox"]');
        userA[username].userAchkData = [];

        inputs.forEach(function (input) {
            userA[username].userAchkData.push({
                id: input.id,
                checked: input.checked
            });
        });

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

Answer 1

Распространение происходит по событию click, а не по самому узлу. Если вы сделаете что-то вроде:

inputElem.addEventListener('click', function(e) { e.stopPropagation(); });

Это остановит всплывающее событие.

Но, глядя на то, что вы пытаетесь достичь, возможно, использование click() приведет к успеху. более сложным для вас. Вместо того, чтобы имитировать щелчок, вы можете программно установить флажки, например:

inputElem.checked = true;

Answer 2

Вы просто зацикливаетесь и снимаете все флажки, когда присваиваете false их свойству .checked. Похоже, что вы перебираете массив объектов со свойствами id, которые вы используете для получения элементов, а затем просто .click() их. Я не вижу ничего, присваивающего localStorage. Взгляните на это:

//<![CDATA[
/* js/external.js */
let get, post, doc, html, bod, nav, M, I, mobile, S, Q, special, unspecial; // for use on other loads
addEventListener('load', ()=>{
get = (url, success, context)=>{
  const x = new XMLHttpRequest;
  const c = context || x;
  x.open('GET', url);
  x.onload = ()=>{
    if(success)success.call(c, JSON.parse(x.responseText));
  }
  x.send();
}
post = function(url, send, success, context){
  const x = new XMLHttpRequest;
  const c = context || x;
  x.open('POST', url);
  x.onload = ()=>{
    if(success)success.call(c, JSON.parse(x.responseText));
  }
  if(typeof send === 'object' && send && !(send instanceof Array)){
    if(typeof FormData !== 'undefined' && send instanceof FormData){
      x.send(send);
    }
    else{
      let s, r = [];
      for(let p in send){
        s = send[p];
        if(typeof s === 'object')s = JSON.stringify(s);
        r.push(encodeURIComponent(p)+'='+encodeURIComponent(s));
      }
      x.setRequestHeader('Content-type', 'application/x-www-form-urlencoded'); x.send(r.join('&'));
    }
  }
  else{
    throw new Error('send argument must be an Object');
  }
  return x;
}
doc = document; html = doc.documentElement; bod = doc.body; nav = navigator; M = tag=>doc.createElement(tag); I = id=>doc.getElementById(id);
mobile = nav.userAgent.match(/Mobi/i) ? true : false;
S = (selector, within)=>{
  var w = within || doc;
  return w.querySelector(selector);
}
Q = (selector, within)=>{
  var w = within || doc;
  return w.querySelectorAll(selector);
}
special = str=>str.replace(/&/g, '&amp;').replace(/'/g, '&apos;').replace(/"/g, '&quot;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
unspecial = str=>str.replace(/&amp;/g, '&').replace(/&apos;/g, "'").replace(/&quot;/g, '"').replace(/&lt;/g, '<').replace(/&gt;/g, '>');

// Put on another page, if you want. - except the end load
let data;
if(localStorage.data){
  data = JSON.parse(localStorage.data);
}
else{
  data = {friendly:false, loving:true, happy:false, greatful:true, smart:true};
}
for(let i=0,o,q=Q('#checks>input'),l=q.length; i<l; i++){
  o = q[i];
  o.checked = data[o.id] ? true : false;
  o.onclick = function(){
    data[this.id] = this.checked; localStorage.data = JSON.stringify(data);
  }
}

}); // end load
//]]>

/* css/external.css */
*{
  box-sizing:border-box; padding:0; margin:0;
}
html,body{
  width:100%; height:100%; background:#ccc;
}
.main{
  padding:10px;
}
#checks>*{
  float:left;
}
#checks>input{
  margin-right:4px; clear:left;
}

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml' xml:lang='en' lang='en'>
  <head>
    <meta charset='UTF-8' /><meta name='viewport' content='width=device-width, height=device-height, initial-scale:1, user-scalable=no' />
    <title>Title Here</title>
    <link type='text/css' rel='stylesheet' href='css/external.css' />
    <script src='js/external.js'></script>
  </head>
<body>
  <div class='main'>
    <h2>Check All that Apply</h2>
    <div id='checks'>
      <input id='friendly' type='checkbox' /><label for='friendly'>friendly</label>
      <input id='loving' type='checkbox' /><label for='loving'>loving</label>
      <input id='happy' type='checkbox' /><label for='happy'>happy</label>
      <input id='greatful' type='checkbox' /><label for='greatful'>greatful</label>
      <input id='smart' type='checkbox' /><label for='smart'>smart</label>
    </div>
  </div>
</body>
</html>