Флажок, радио кнопки на локальном хранилище

Question

У меня проблема с добавлением моих флажков и переключателей в localalstorage ... Поскольку мои радиокнопки зависят от моего флажка, когда я проверяю один параметр в флажке, одна из групп переключателей отображается на экране.Я просто хочу сохранить свои радиокнопки и флажки в локальном хранилище, загрузить их и предупредить об этом на экране, когда захочу ... Просто не знаю, как это сделать, это мое: HTML:

Я знаю, каксделать это с моим флажком (не показывая его в предупреждении, потому что я не знаю, как я могу сделать это полностью), но у меня есть проблемы с радиокнопками, они отображаются / скрываются, когда я проверяю свой флажок, и у меня есть несколькогруппы радиокнопок здесь ..

Спасибо за помощь

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

Попробуйте код ниже

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 2

Я добавил несколько вещей, использовал атрибут data-target для выделения радиоконтейнеров с флажками и показа их внутри функции load_(), когда установлен соответствующий флажок, более того, вы должны использовать idполей checkboxes и radio, чтобы сохранить их в localStorage вместо использования значения, которое будет true и будет переопределено.

Ваши изменения JavaScript здесь

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

 }

изменения html:

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

и

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

проверьте атрибут data-target, у которого есть идентификатор контейнеров переключателей, которые связаны с флажками

и вот рабочие FIDDLE

---

EDIT

Для оповещения о значениях, которые проверяются при сохранении, вы можете изменить функцию сохранения на следующую

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

Answer 3

Я внес некоторые изменения в ваш HTML и Javascript.

По соображениям безопасности: код, не работающий во фрагменте, попробуйте здесь: https://jsfiddle.net/h7r0o2fg/12/

В HTML я добавил values в inputs

И в сценарии я добавил условие переключателя.

Полагаю, у вас есть логика для вызова метода save(), я вызывал его вручную.Затем, обновив страницу, я вызывал функцию load_().

   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()">