Save multipule checkboxs individual states after page refresh

Question

I have 15 or so individual checkboxes each without id or class, the problem is I would like for them all to retain their individual checked or unchecked status (using local storage) either on form submit or page refresh

<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>

My question is, is this possible in Javascript to save them in local storage without having to assign a class or id to each checkbox?

If possible, a working fiddle would be gratefully appreciated Jason

looks like your name is unique, so you could use that as an identifier. — Natrium, Mar 05 '20 at 06:09
Check https://stackoverflow.com/questions/26628812/localstorage-how-to-save-a-checkbox and https://stackoverflow.com/questions/10306129/javascript-get-element-by-name and there you have it. — Natrium, Mar 05 '20 at 06:11
To answer your question.. Yes it is possible to do that using localstorage.. the name attribute of you elements seems to be unique you can use that.. as you can access specific elements using the name attribute.. Just be sure that they have some unique identifier on them preferable us id but name also works.. — Manish, Mar 05 '20 at 06:14
you can add a unique identifier to each using the `data-attribute` and then use that as identifier.or use your `name` to identify and save and pre populate the data. — Kaushik, Mar 05 '20 at 06:16
@Kaushik if OP can add ```data-attribute```, OP could as wel add ```id```, which is in fact semantically more correct. — Natrium, Mar 06 '20 at 05:44

score 0 · Answer 1 · answered Mar 05 '20 at 06:45

Let's assume our checkboxes are blind

<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"/>

Now we need to find out which element was clicked, for this we can get the index of the element which is clicked.

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

this line will gives you the index of clicked element which you can save in your localstorage

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

and also you can check whenever your page load that which index is saved in your localstorage.

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;
      }
    }

hence the complete code

 <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

score 0 · Answer 2 · answered Mar 05 '20 at 07:04

This is the second way to achieve the above problem. Let's assume you don't want to define that onclick on each of your tag.

all you need to do is listen the event. shhhhh

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

so you are able to listen the event right ?. Now where in your body you click will be heard by this. But as per your scenario you need to listen only when the input type checkbox clicked.

so we will add a condition

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

and rest of strategy will be same like get the index store it into local-storage and add the checkbox value true while loading. so here is complete code

<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

Save multipule checkboxs individual states after page refresh

2 Answers2