Question

我有一个关于将复选框和单选按钮添加到localstorage的问题...因为我的单选按钮取决于我的复选框，当我选中复选框中的一个选项时，单选按钮之一＆＃39; s组显示在屏幕上。我只是想在localstorage中保存我的radiobuttons和复选框，加载它并在我想要的时候在屏幕上提醒它...只是不知道该怎么做，它是我的： HTML：

我知道如何使用我的复选框（没有在警告中显示它，因为我不知道我怎么能完全做到这一点），但是我遇到了无线电按钮的问题，他们正在显示/当我检查我的复选框时隐藏，我在这里有几组radiobuttons ..

感谢您的帮助

＆＃13;

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

＆＃13;

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

＆＃13;

Answer 1

我已经对您的HTML和Javascript进行了一些更改。

出于安全原因：代码无法在snipet中运行，请尝试此处：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()">

Answer 2

尝试以下代码

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

我添加了一些内容，使用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属性我是否具有链接到复选框的单选按钮的容器ID

这是工作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);
    }

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

3 个答案: