复选框，本地存储上的单选按钮

Question

I've got a problem about adding my checkboxes and radio buttons to localstorage... Because my radiobuttons depend on my checkbox, when I'm checking one option in checkbox, one of radio button's group shows on screen. I just wanna to save my radiobuttons and checkboxes in localstorage, load it and alert it in screen when I want... Just don't know how to do it, it's my: HTML:

I know how to do it with my checkbox (without showing it in an alert, because I don't know how can I do it totally), but I've got problems with radiobuttons, they are showing/hiding when I check my checkbox and I have few groups of that radiobuttons here..

Thanks for the help

 function toggleAttributes(checkbox, radios, attribute, attributeValue) { for (var i = 0; i < radios.length; i += 1) { // If checkbox is checked, set the attribute and the attribute value. If not, remove the attribute checkbox.checked === true ? radios[i].setAttribute(attribute, attributeValue) : radios[i].removeAttribute(attribute); } } function toggleRadios(el, id) { var radiosSelector = `#${id} input[type='radio']`, container = document.getElementById(id), radios = document.querySelectorAll(radiosSelector); container.classList.toggle("hide"); toggleAttributes(el, radios, "required", ""); } var i; var checkboxes = document.querySelectorAll('input[type=checkbox]'); function save() { for (i = 0; i < checkboxes.length; i++) { localStorage.setItem(checkboxes[i].value, checkboxes[i].checked); } } function load_() { for (i = 0; i < checkboxes.length; i++) { checkboxes[i].checked = localStorage.getItem(checkboxes[i].value) === 'true' ? true:false; } } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <p> Wybierz dania: </p> <div class="custom-control custom-checkbox custom-control-inline"> <input type="checkbox" class="custom-control-input" id="checkGlowne" onclick="toggleRadios(this, 'pierwsze')"> <label class="custom-control-label" for="checkGlowne">Glowne</label> </div> <div class="custom-control custom-checkbox custom-control-inline"> <input type="checkbox" class="custom-control-input" id="checkZupy" onclick="toggleRadios(this, 'zupy')"> <label class="custom-control-label" for="checkZupy">Zupy</label> </div> <p> Pierwsze dania: </p> <div id = "pierwsze" class = "hide"> <div class="custom-control custom-radio custom-control-inline"> <input type="radio" class="custom-control-input" id="piers"> <label class="custom-control-label" for="piers">Pierś z kaczki</label> </div> <div class="custom-control custom-radio custom-control-inline"> <input type="radio" class="custom-control-input" id="stek"> <label class="custom-control-label" for="stek">Stek z antrykotu</label> </div> <div class="custom-control custom-radio custom-control-inline"> <input type="radio" class="custom-control-input" id="sandacz"> <label class="custom-control-label" for="sandacz">Sandacz</label> </div> <div class="custom-control custom-radio custom-control-inline"> <input type="radio" class="custom-control-input" id="karas"> <label class="custom-control-label" for="karas">Karaś</label> </div> </div> <div id = "zupy" class = "hide"> <p> Zupy: </p> <div class="custom-control custom-radio custom-control-inline"> <input type="radio" class="custom-control-input" id="rosol"> <label class="custom-control-label" for="rosol">Rosół z kaczki</label> </div> <div class="custom-control custom-radio custom-control-inline"> <input type="radio" class="custom-control-input" id="zurek"> <label class="custom-control-label" for="zurek">Żurek</label> </div> <div class="custom-control custom-radio custom-control-inline"> <input type="radio" class="custom-control-input" id="kokosowa"> <label class="custom-control-label" for="kokosowa">Zupa kokosowa</label> </div> </div> 

Answer 1

I have made some changes in your HTML and Javascript both.

For security reasons: code not working in snipet try here: https://jsfiddle.net/h7r0o2fg/12/

In HTML, I have added values in the inputs

And in the script, I have added the radio button condition.

I guess you have logic to call save() method, I was calling it manually. Then after refreshing the page, I was calling load_() function.

  function toggleAttributes(checkbox, radios, attribute, attributeValue) { for (var i = 0; i < radios.length; i += 1) { // If checkbox is checked, set the attribute and the attribute value. If not, remove the attribute checkbox.checked === true ? radios[i].setAttribute(attribute, attributeValue) : radios[i].removeAttribute( attribute); } } function toggleRadios(el, id) { var radiosSelector = `#${id} input[type='radio']`, container = document.getElementById(id), radios = document.querySelectorAll(radiosSelector); container.classList.toggle("hide"); toggleAttributes(el, radios, "required", ""); } var i; var checkboxes = document.querySelectorAll('input[type=checkbox]'); var alertTxt = []; function save() { alertTxt = []; var radios = document.querySelectorAll('input[type="radio"]'); for (i = 0; i < checkboxes.length; i++) { console.log(checkboxes[i].id, checkboxes[i].checked, checkboxes.length); localStorage.setItem(checkboxes[i].id, checkboxes[i].checked); if(checkboxes[i].checked == true){ alertTxt.push(checkboxes[i].value + "(checked checkboxes)"); } } for (i = 0; i < radios.length; i++) { localStorage.setItem(radios[i].id, radios[i].checked); if(radios[i].checked == true){ alertTxt.push(radios[i].value + "(checked radiobutton)"); } } alert(alertTxt); } function load_() { for (i = 0; i < checkboxes.length; i++) { checkboxes[i].checked = localStorage.getItem(checkboxes[i].id) === 'true' ? true : false; if (checkboxes[i].checked) { var container = '#' + checkboxes[i].dataset.target; document.querySelector(container).classList.toggle("hide"); var radios = document.querySelectorAll('#' + checkboxes[i].dataset.target + ' input[type="radio"]'); for (j = 0; j < radios.length; j++) { console.log(localStorage.getItem(radios[j].id)); radios[j].checked = localStorage.getItem(radios[j].id) === 'true' ? true : false; } } } } // self executing function here (function () { load_(); })(); 

  .hide { display: none; } 

 <p> Wybierz dania: </p> <div class="custom-control custom-checkbox custom-control-inline"> <input type="checkbox" class="custom-control-input" id="checkGlowne" data-target="pierwsze" value="pierwsze" onclick="toggleRadios(this, 'pierwsze')"> <label class="custom-control-label" for="checkGlowne">Glowne</label> </div> <div class="custom-control custom-checkbox custom-control-inline"> <input type="checkbox" class="custom-control-input" id="checkZupy" data-target="zupy" value="checkZupy" onclick="toggleRadios(this, 'zupy')"> <label class="custom-control-label" for="checkZupy">Zupy</label> </div> <p> Pierwsze dania: </p> <div id="pierwsze" class="hide"> <div class="custom-control custom-radio custom-control-inline"> <input type="radio" class="custom-control-input" id="piers" name="pierwsze" value="piers"> <label class="custom-control-label" for="piers">Pierś z kaczki</label> </div> <div class="custom-control custom-radio custom-control-inline"> <input type="radio" class="custom-control-input" id="stek" name="pierwsze" value="stek"> <label class="custom-control-label" for="stek">Stek z antrykotu</label> </div> <div class="custom-control custom-radio custom-control-inline"> <input type="radio" class="custom-control-input" id="sandacz" name="pierwsze" value="sandacz"> <label class="custom-control-label" for="sandacz">Sandacz</label> </div> <div class="custom-control custom-radio custom-control-inline"> <input type="radio" class="custom-control-input" id="karas" name="pierwsze" value="karas"> <label class="custom-control-label" for="karas">Karaś</label> </div> </div> <div id="zupy" class="hide"> <p> Zupy: </p> <div class="custom-control custom-radio custom-control-inline"> <input type="radio" class="custom-control-input" id="rosol" name="zupy" value="karas"> <label class="custom-control-label" for="rosol">Rosół z kaczki</label> </div> <div class="custom-control custom-radio custom-control-inline"> <input type="radio" class="custom-control-input" id="zurek" name="zupy" value="zurek"> <label class="custom-control-label" for="zurek">Żurek</label> </div> <div class="custom-control custom-radio custom-control-inline"> <input type="radio" class="custom-control-input" id="kokosowa" name="zupy" value="kokosowa"> <label class="custom-control-label" for="kokosowa">Zupa kokosowa</label> </div> </div> <input type="button" value="save" onclick="save()"> 

Answer 2

Try below code

function save() {
for (i = 0; i < checkboxes.length; i++) {
    localStorage.setItem(checkboxes[i].id, checkboxes[i].checked); 
}


function load_() {
    $('input[type=radio]').each(function () {
        var Ischeck = localStorage.getItem(this.id);
        this.prop('checked', Ischeck)
    });
}

Answer 3

There are a few things that i have added, used data-target attribute for dedicating the radio containers with the checkboxes and showing them inside the load_() function when the relative checkbox is checked, moreover you should use the id of the checkboxes and the radio boxes to save them in the localStorage rather than using value which would be true and will be overridden.

Your javascript changes are here

 function save() {
        var radios = document.querySelectorAll('input[type="radio"]');
        for (i = 0; i < checkboxes.length; i++) {
            localStorage.setItem(checkboxes[i].id, checkboxes[i].checked);
        }
        for (i = 0; i < radios.length; i++) {
            localStorage.setItem(radios[i].id, radios[i].checked);
        }
 }

 function load_() {
        for (i = 0; i < checkboxes.length; i++) {
            checkboxes[i].checked = localStorage.getItem(checkboxes[i].id) === 'true' ? true : false;

            if (checkboxes[i].checked) {
                var container = '#' + checkboxes[i].dataset.target;
                document.querySelector(container).classList.toggle("hide");
                var radios = document.querySelectorAll('#' + checkboxes[i].dataset.target + ' input[type="radio"]');
                for (j = 0; j < radios.length; j++) {
                    radios[j].checked = localStorage.getItem(radios[j].id) === 'true' ? true : false;
                }
            }
        }

 }

you html changes are

<input type="checkbox" class="custom-control-input" id="checkGlowne" data-target="pierwsze" onclick="toggleRadios(this, 'pierwsze')">

and

<input type="checkbox" class="custom-control-input" id="checkZupy" data-target="zupy" onclick="toggleRadios(this, 'zupy')">

check the data-target attribute i has the id of the containers of the radio buttons that are linked to the checkboxes

and here is the working FIDDLE

---

EDIT

For alerting the values that are checked when saving you can change the save function to the following

function save() {
        var saved = '';
        var radios = document.querySelectorAll('input[type="radio"]');
        for (i = 0; i < checkboxes.length; i++) {
            localStorage.setItem(checkboxes[i].id, checkboxes[i].checked);
        }
        for (i = 0; i < radios.length; i++) {
            if (radios[i].checked === true) {
                saved += radios[i].id + ' (checked radiobutton)\n';
            }

            localStorage.setItem(radios[i].id, radios[i].checked);
        }
        alert(saved);
    }