localStorage - Retrieve Checkbox Values

Question

I'm working with a form (made with Bootstrap 4) and localStorage. I'm using it so i can use the form input values on another page. It works fine with the inputs, but in this form i also have checkboxes and i can't find how to do the following : i'd like to check which checkboxes are checked. For those that are checked, i'd like to add the checkbox label text in the localStorage to use it on my other page. How can i achieve this?

My html looks like this :

 <form role="form" id="form" data-toggle="validator">

    <div class="form-row">
      <div class="form-group col-md-12">
        <label for="inputAdresse">Adresse *</label>
        <input type="text" class="form-control places-autocomplete" name="inputAdresse" id="inputAdresse"
          required="required" placeholder="" value="" autocomplete=" address-line1" />
      </div>
    </div>

    <div class="form-row form-checks">
        <div class="form-group col-md-12 col-sm-6">
            <div class="custom-control custom-checkbox mb-2">
            <input type="checkbox" class="custom-control-input" id="checkAscenseur" name="check" value="Ascenseur">
            <label class="custom-control-label" for="checkAscenseur">Ascenseur</label>
            </div>

            <div class="custom-control custom-checkbox mb-2">
            <input type="checkbox" class="custom-control-input" id="checkCave" name="check" value="Cave">
            <label class="custom-control-label" for="checkCave">Cave</label>
            </div>

            <div class="custom-control custom-checkbox mb-2">
            <input type="checkbox" class="custom-control-input" id="checkParking" name="check" value="Parking">
            <label class="custom-control-label" for="checkParking">Parking</label>
            </div>
        </div>
    </div>
    <button class="nextBtn pull-right" type="submit" id="btn-submit">Submit</button>
</form>

For the input, i use the following javascript :

document.getElementById("form").addEventListener("submit", callme);

function callme(event) {
  event.preventDefault();

  let inputAdresse = document.getElementById('inputAdresse');
  localStorage.setItem('inputAdresse', inputAdresse.value);

  window.location.href = "thank-you.html";
};

Possible duplicate of [Getting all selected checkboxes in an array](https://stackoverflow.com/questions/590018/getting-all-selected-checkboxes-in-an-array) — APAD1, Mar 21 '19 at 21:32
See also [Get the value of checked checkbox?](https://stackoverflow.com/questions/11599666/get-the-value-of-checked-checkbox) — Benjamin, Mar 21 '19 at 21:34
I found these articles and tried to add ```var inputCheckboxes = new Array(); $("input:checkbox[name=check]:checked").each(function () { inputCheckboxes.push($(this).val()); }); ``` to my javascript. But i can't figure out how then to store them in localStorage and use them with getItem on the next page.. — Alany, Mar 21 '19 at 21:43
@Alany Please check my answer below - it has a working demo of what you need: https://stackoverflow.com/a/55289712/3000684 — Nadine, Mar 21 '19 at 21:48
@Nadi Yess i actually had to cleanup my localStorage, that's why this wan't working. Now i see them in the localStorage but this records true or false (Eg. `checkAscenseur: "true"`). How can i record the value of the checkbox instead? — Alany, Mar 21 '19 at 22:16
@Alany I don't quite get you. Have you seen my demo? In the local storage, it saves: Key as "checkParking" and its Value as "true". What do you need it to store instead? — Nadine, Mar 22 '19 at 01:18
@Alany Can you describe how you'd like to use these values? Will these values (e.g. "Ascenseur") ever change? I've added an update to my answer that save the `data-value="Ascenseur"` attributes to local storage. — Nadine, Mar 22 '19 at 01:30
That's exactly what i needed! Save the data-value! You're a beats thanks a lot! — Alany, Mar 22 '19 at 12:02

Nadine · Accepted Answer · 2019-03-22T01:31:49.343

Here is the working DEMO of how to do what you need.

You need to use the checked property for checkboxes:

document.getElementById("form").addEventListener("submit", callme);

function callme(event) {
  event.preventDefault();

  let inputAdresse = document.getElementById('inputAdresse');
  localStorage.setItem('inputAdresse', inputAdresse.value);
  
  let checkAscenseur = document.getElementById('checkAscenseur');
  localStorage.setItem('checkAscenseur', checkAscenseur.checked);
  
  let checkCave = document.getElementById('checkCave');
  localStorage.setItem('checkCave', checkCave.checked);
  
  let checkParking = document.getElementById('checkParking');
  localStorage.setItem('checkParking', checkParking.checked);

  window.location.href = "thank-you.html";
};

UPD new code that saves data values instead of true/false: DEMO.

score 0 · Answer 2 · answered Mar 21 '19 at 21:52

You could also do it the following way (pretty much the same, but a bit more compact):

document.getElementById("form").addEventListener("submit", callme);

function callme(event) {
  event.preventDefault();

  let inputAdresse = document.getElementById('inputAdresse');
  localStorage.setItem('inputAdresse', inputAdresse.value);

  new Array(...document.getElementById('form').getElementsByClassName('custom-control-input')).forEach(cb => {
    localStorage.setItem(cb.id, cb.checked);
  }

  window.location.href = "thank-you.html";
}

I convert the HTMLCollection I get from the .getElementsByClassName(...) function to an array, which I can iterate over using .forEach(). If you want to store the values by their ids, this works fine :P

localStorage - Retrieve Checkbox Values

2 Answers2