title: Checkbox, radio buttons on local storage
body: <p>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:</p>
  
  <p>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..</p>
  
  <p>Thanks for the help</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>function toggleAttributes(checkbox, radios, attribute, attributeValue) {
    for (var i = 0; i &lt; 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 &lt; checkboxes.length; i++) {
          localStorage.setItem(checkboxes[i].value, checkboxes[i].checked); 
      }
  }
  
  function load_() {
      for (i = 0; i &lt; checkboxes.length; i++) {
          checkboxes[i].checked = localStorage.getItem(checkboxes[i].value) === 'true' ? true:false;
      }
  } </code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;p&gt;
    Wybierz dania:
  &lt;/p&gt;
  &lt;div class="custom-control custom-checkbox custom-control-inline"&gt;
    &lt;input type="checkbox" class="custom-control-input" id="checkGlowne" onclick="toggleRadios(this, 'pierwsze')"&gt;
    &lt;label class="custom-control-label" for="checkGlowne"&gt;Glowne&lt;/label&gt;
  &lt;/div&gt;
  &lt;div class="custom-control custom-checkbox custom-control-inline"&gt;
    &lt;input type="checkbox" class="custom-control-input" id="checkZupy" onclick="toggleRadios(this, 'zupy')"&gt;
    &lt;label class="custom-control-label" for="checkZupy"&gt;Zupy&lt;/label&gt;
  &lt;/div&gt;
  &lt;p&gt;
    Pierwsze dania:
  &lt;/p&gt;
  &lt;div id = "pierwsze" class = "hide"&gt;
    &lt;div class="custom-control custom-radio custom-control-inline"&gt;
      &lt;input type="radio" class="custom-control-input" id="piers"&gt;
      &lt;label class="custom-control-label" for="piers"&gt;Pierś z kaczki&lt;/label&gt;
    &lt;/div&gt;
    &lt;div class="custom-control custom-radio custom-control-inline"&gt;
      &lt;input type="radio" class="custom-control-input" id="stek"&gt;
      &lt;label class="custom-control-label" for="stek"&gt;Stek z antrykotu&lt;/label&gt;
    &lt;/div&gt;
    &lt;div class="custom-control custom-radio custom-control-inline"&gt;
      &lt;input type="radio" class="custom-control-input" id="sandacz"&gt;
      &lt;label class="custom-control-label" for="sandacz"&gt;Sandacz&lt;/label&gt;
    &lt;/div&gt;
    &lt;div class="custom-control custom-radio custom-control-inline"&gt;
      &lt;input type="radio" class="custom-control-input" id="karas"&gt;
      &lt;label class="custom-control-label" for="karas"&gt;Karaś&lt;/label&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  &lt;div id = "zupy" class = "hide"&gt;
    &lt;p&gt;
      Zupy:
    &lt;/p&gt;
    &lt;div class="custom-control custom-radio custom-control-inline"&gt;
      &lt;input type="radio" class="custom-control-input" id="rosol"&gt;
      &lt;label class="custom-control-label" for="rosol"&gt;Rosół z kaczki&lt;/label&gt;
    &lt;/div&gt;
    &lt;div class="custom-control custom-radio custom-control-inline"&gt;
      &lt;input type="radio" class="custom-control-input" id="zurek"&gt;
      &lt;label class="custom-control-label" for="zurek"&gt;Żurek&lt;/label&gt;
    &lt;/div&gt;
    &lt;div class="custom-control custom-radio custom-control-inline"&gt;
      &lt;input type="radio" class="custom-control-input" id="kokosowa"&gt;
      &lt;label class="custom-control-label" for="kokosowa"&gt;Zupa kokosowa&lt;/label&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>