Сохранять отдельные состояния флажков после обновления страницы - PullRequest
Новая
       4

Сохранять отдельные состояния флажков после обновления страницы

1 голос
/ 05 марта 2020

У меня 15 или около того отдельных флажков каждый без идентификатора или класса, проблема в том, что я хотел бы, чтобы все они сохранили свой индивидуальный отмеченный или непроверенный статус (с использованием локального хранилища) либо при отправке формы, либо на странице. refre sh

<form name="searchform" id="form1" method="get" action="/ztest.php">
<input type="checkbox" name="opt17" value="Yes"/>
<input type="checkbox" name="opt18" value="Yes"/>
<input type="checkbox" name="opt19" value="Yes"/>
etc...
</form>

Мой вопрос: возможно ли в Javascript сохранить их в локальном хранилище без необходимости присваивать класс или идентификатор каждому флажку?

Если возможно, работающая скрипка будет благодарна Джейсону

Ответы [ 2 ]

0 голосов
/ 05 марта 2020

Это второй способ решения вышеуказанной проблемы. Предположим, вы не хотите определять этот клик на каждом из ваших тегов.

Все, что вам нужно сделать, это прослушать событие. шхххх 

document.addEventListener("click", function(event){
  console.log(event.target);
});

чтобы вы могли слушать событие правильно? Теперь, где в вашем теле вы будете щелкать, это услышит. Но в соответствии с вашим сценарием вам нужно слушать только когда флажок типа ввода нажал.

, поэтому мы добавим условие 

if (event.target.type === "checkbox") {
  // this is checkbox bro
}

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

<body>
    <input type = "checkbox"/>
    <input type = "checkbox" />
    <input type = "checkbox"/>
    <input type = "checkbox"/>
    <input type = "checkbox"/>
    <input type = "checkbox"/>
    <input type = "checkbox"/>
    <input type = "checkbox"/>
  </body>
  <script>
    const inputs = document.querySelectorAll("input");
    console.log(inputs);
    if (localStorage.length > 0) {
      for (let key in localStorage) {
        if (!isNaN(localStorage[key]))
         inputs[localStorage[key]].checked = true;
      }
    }
    document.addEventListener("click", function(event){
      console.log(event.target);
      if (event.target.type === "checkbox") {
        const el = event.target;
        const clickedIndex = [...el.parentElement.children].indexOf(el);
        if (event.target.checked) {
        // adding click value to local storage
        localStorage.setItem([...el.parentElement.children].indexOf(el), [...el.parentElement.children].indexOf(el));
        } else {
          // deleting unchecked value from localstorage
          localStorage.removeItem([...el.parentElement.children].indexOf(el), [...el.parentElement.children].indexOf(el));
        }
      }
    });
  </script>

REPLLINK

0 голосов
/ 05 марта 2020

Давайте предположим, что наши флажки являются слепыми 

<input type="checkbox" onclick = "clickThis(event)" value="Yes"/>
<input type="checkbox" onclick = "clickThis(event)" value="Yes"/>
<input type="checkbox" onclick = "clickThis(event)" value="Yes"/>
<input type="checkbox" onclick = "clickThis(event)" value="Yes"/>
<input type="checkbox" onclick = "clickThis(event)" value="Yes"/>
<input type="checkbox" onclick = "clickThis(event)" value="Yes"/>

Теперь нам нужно выяснить, по какому элементу щелкнули, для этого мы можем получить индекс элемента, по которому щелкнули. 

const clickedIndex = [...event.target.parentElement.children].indexOf(event.target);

эта строка даст вам индекс элемента, по которому щелкнули, который вы можете сохранить в вашем локальном хранилище 

localStorage.setItem([...el.parentElement.children].indexOf(el), [...el.parentElement.children].indexOf(el));

, а также вы можете проверить, загружает ли ваша страница тот индекс, который сохранен в вашем локальном хранилище. 

const inputs = document.querySelectorAll("input");
    console.log(inputs);
    if (localStorage.length > 0) {
      for (let key in localStorage) {
        if (!isNaN(localStorage[key]))
         inputs[localStorage[key]].checked = true;
      }
    }

отсюда полный код 

 <body>
    <input type = "checkbox" onclick = "clickThis(event)"/>
    <input type = "checkbox" onclick = "clickThis(event)"/>
    <input type = "checkbox" onclick = "clickThis(event)"/>
    <input type = "checkbox" onclick = "clickThis(event)"/>
    <input type = "checkbox" onclick = "clickThis(event)"/>
    <input type = "checkbox" onclick = "clickThis(event)"/>
    <input type = "checkbox" onclick = "clickThis(event)"/>
    <input type = "checkbox" onclick = "clickThis(event)"/>
  </body>
  <script>
    const inputs = document.querySelectorAll("input");
    console.log(inputs);
    if (localStorage.length > 0) {
      for (let key in localStorage) {
        if (!isNaN(localStorage[key]))
         inputs[localStorage[key]].checked = true;
      }
    }
    function clickThis(event) {
      console.log(event.target);
      const el = event.target;
      const clickedIndex = [...el.parentElement.children].indexOf(el);
      if (event.target.checked) {
      // adding click value to local storage
      localStorage.setItem([...el.parentElement.children].indexOf(el), [...el.parentElement.children].indexOf(el));
      } else {
        // deleting unchecked value from localstorage
        localStorage.removeItem([...el.parentElement.children].indexOf(el), [...el.parentElement.children].indexOf(el));
      }
    }
  </script>

#happy_coding
REPL link
https://repl.it/repls/SlateblueCorruptScale
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Похожие темы

...