I have a list of multiple radios and I would like to save which radios are checked in localStorage when the user clicks a button.

Once the user reloads (or comes back on) the page, I would like to check the radios that where checked when he clicked the button.

I've tried this but can't manage to make it work :(

let radioChecked = Array.from(document.querySelectorAll("input[type=radio]:checked"));
let nbRadio = radioChecked.length;
let radioList = Array.apply(null, Array(nbRadio)).map(function (x, i) { return i; });


function saveFav(x, y){
  localStorage.setItem(x, y);
}

function favorite(){
  for (i = 0; i < radioList.length; i  ) {
    saveFav(radioList[i], radioChecked[i]);
  }
}

function reload() {
  for (var i = 0; i < radioList.length; i  ) {
      localStorage.getItem(radioList[i]).checked = true;
    }
  }

<div><b>Favorite sport :</b>
  <input type="radio" id="basketball" name="sport" value="basketball">
  <label for="basketball">basketball</label>
  <input type="radio" id="football" name="sport" value="football">
  <label for="football">football</label>
  <input type="radio" id="handball" name="sport" value="handball" checked="checked">
  <label for="handball">handball</label><br>
</div>
<div><b>Favorite fruit :</b>
  <input type="radio" id="banana" name="fruit" value="banana">
  <label for="banana">banana</label>
  <input type="radio" id="apple" name="fruit" value="apple">
  <label for="apple">apple</label>
  <input type="radio" id="pear" name="fruit" value="pear">
  <label for="pear">pear</label>
  <input type="radio" id="raspberry" name="fruit" value="raspberry" checked="checked">
  <label for="raspberry">raspberry</label><br>
</div>
<div><b>Favorite ... :</b>
 other radios ...<br><br>
</div>
<input type="button" value="Save favorite" onclick="favorite()">
<input type="button" value="Load favorite" onclick="reload()">


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Any Idea on how to achieve this ?

CodePudding user response：

You can use this :)

function saveFav() {
  let checked = Array.from(document.querySelectorAll("input[type=radio]:checked")).map(e => e.id);
  localStorage.setItem('checked', JSON.stringify(checked));
}

function setFav() {
  const getChecked = JSON.parse(localStorage.getItem("checked"));
  let radios = [...document.querySelectorAll("input[type=radio]")];
  radios.forEach(e => {
    e.removeAttribute("checked")
    getChecked.forEach(id => {
      if (e.id === id) {
        e.setAttribute("checked", "checked");
      }
    })
  });
}

<div><b>Favorite sport :</b>
  <input type="radio" id="basketball" name="sport" value="basketball" checked="checked">
  <label for="basketball">basketball</label>
  <input type="radio" id="football" name="sport" value="football">
  <label for="football">football</label>
  <input type="radio" id="handball" name="sport" value="handball">
  <label for="handball">handball</label><br>
</div>
<div><b>Favorite fruit :</b>
  <input type="radio" id="banana" name="fruit" value="banana" checked="checked">
  <label for="banana">banana</label>
  <input type="radio" id="apple" name="fruit" value="apple">
  <label for="apple">apple</label>
  <input type="radio" id="pear" name="fruit" value="pear">
  <label for="pear">pear</label>
  <input type="radio" id="raspberry" name="fruit" value="raspberry">
  <label for="raspberry">raspberry</label><br>
</div>
<div><b>Favorite ... :</b> other radios ...<br><br>
</div>
<input onclick="saveFav()" type="button" value="Save favorite">
<input onclick="setFav()" type="button" value="Load favorite">

And this one will auto set the radio buttons on load, No need to hit the reload button

function saveFav() {
  let checked = Array.from(document.querySelectorAll("input[type=radio]:checked")).map(e => e.id);
  localStorage.setItem('checked', JSON.stringify(checked));
}
window.onload = () => {
  const getChecked = JSON.parse(localStorage.getItem("checked"));
  let radios = [...document.querySelectorAll("input[type=radio]")];
  radios.forEach(e => {
    e.removeAttribute("checked")
    getChecked.forEach(id => {
      if (e.id === id) {
        e.setAttribute("checked", "checked");
      }
    })
  });
}

<div><b>Favorite sport :</b>
  <input type="radio" id="basketball" name="sport" value="basketball" checked="checked">
  <label for="basketball">basketball</label>
  <input type="radio" id="football" name="sport" value="football">
  <label for="football">football</label>
  <input type="radio" id="handball" name="sport" value="handball">
  <label for="handball">handball</label><br>
</div>
<div><b>Favorite fruit :</b>
  <input type="radio" id="banana" name="fruit" value="banana" checked="checked">
  <label for="banana">banana</label>
  <input type="radio" id="apple" name="fruit" value="apple">
  <label for="apple">apple</label>
  <input type="radio" id="pear" name="fruit" value="pear">
  <label for="pear">pear</label>
  <input type="radio" id="raspberry" name="fruit" value="raspberry">
  <label for="raspberry">raspberry</label><br>
</div>
<input onclick="saveFav()" type="button" value="Save favorite">

CodePudding user response：

  
function saveFav(x, y){
    localStorage.setItem(x, y);
}

function favorite(){
    let radioChecked = Array.from(document.querySelectorAll("input[type=radio]:checked"));
    for (i = 0; i < radioChecked.length; i  ) {    
      saveFav(radioChecked[i].name, radioChecked[i].value);
    }
}

function reload() {
    let radioList = Array.from(document.querySelectorAll("input[type=radio]"));
    for (var i = 0; i < radioList.length; i  ) {      
        const storeData = localStorage.getItem(radioList[i].name);
        console.log(storeData)
        if(radioList[i].value === storeData) {
            radioList[i].setAttribute('checked', "checked");
        }
  }
}

reload();

<div><b>Favorite sport :</b>
  <input type="radio" id="basketball" name="sport" value="basketball">
  <label for="basketball">basketball</label>
  <input type="radio" id="football" name="sport" value="football">
  <label for="football">football</label>
  <input type="radio" id="handball" name="sport" value="handball" checked="checked">
  <label for="handball">handball</label><br>
</div>
<div><b>Favorite fruit :</b>
  <input type="radio" id="banana" name="fruit" value="banana">
  <label for="banana">banana</label>
  <input type="radio" id="apple" name="fruit" value="apple">
  <label for="apple">apple</label>
  <input type="radio" id="pear" name="fruit" value="pear">
  <label for="pear">pear</label>
  <input type="radio" id="raspberry" name="fruit" value="raspberry" checked="checked">
  <label for="raspberry">raspberry</label><br>
</div>
<div><b>Favorite ... :</b>
 other radios ...<br><br>
</div>
<input type="button" value="Save favorite" onclick="favorite()">

Try this, I think you want like this