Question

我试图将localstorage添加到两个ckeckbox，但第一个复选框的行为与secod完全相同，即使它们具有不同的状态。如果取消选中第一个复选框并选中第二个复选框，则在页面重新加载时，第一个将被检查，就像第二个一样，当第二个未选中时，第一个也将取消选中，即使已选中。我不知道为什么它表现得像一只复制猫这是项目的github链接：https://github.com/OGUNSOLA/project-9-master-

谢谢

<div class="notify">
                <p>Send Email Notifications</p>
                <div class="onoffswitch toggleSwitch1" >
                    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch" >
                    <label class="onoffswitch-label" for="myonoffswitch">
                        <span class="onoffswitch-inner"></span>
                        <span class="onoffswitch-switch"></span>
                    </label>
                </div>
            </div>

            <div class="profile">
                <p>Set Profile To Public</p>
                <div class="onoffswitch toggleSwitch2" >
                    <input type="checkbox" name="onoffswitch2" class="onoffswitch-checkbox" id="myonoffswitch2" >
                    <label class="onoffswitch-label" for="myonoffswitch2">
                        <span class="onoffswitch-inner"></span>
                        <span class="onoffswitch-switch"></span>
                    </label>
                </div>
            </div>


var save = document.getElementById("save");
save.addEventListener("click",saved,false);

window.onload=load;



var i;
var checkboxes = document.querySelectorAll('input[type=checkbox]');


function saved() {

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

Answer 1

您在localstorage的基础上保存到value，但您的复选框上没有value属性。试一试：

<强> HTML

<div class="notify">
    <p>Send Email Notifications</p>
    <div class="onoffswitch toggleSwitch1">
        <input type="checkbox" name="onoffswitch" value="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch">
        <label class="onoffswitch-label" for="myonoffswitch">
            <span class="onoffswitch-inner"></span>
            <span class="onoffswitch-switch"></span>
        </label>
    </div>
</div>
<div class="profile">
    <p>Set Profile To Public</p>
    <div class="onoffswitch toggleSwitch2">
        <input type="checkbox" name="onoffswitch2" value="onoffswitch2" class="onoffswitch-checkbox" id="myonoffswitch2">
        <label class="onoffswitch-label" for="myonoffswitch2">
            <span class="onoffswitch-inner"></span>
            <span class="onoffswitch-switch"></span>
        </label>
    </div>
</div>

<强>的JavaScript

var save = document.getElementById("save");
save.addEventListener("click", saved, false);
window.onload = load;
var i;
var checkboxes = document.querySelectorAll('input[type=checkbox]');

function saved() {
    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;
    }
}

localstorage用于复选框

1 个答案: