使用原版 JS 在页面重新加载时保持选中或取消选中复选框

我无法解决这个问题。我有这个复选框：

<input id="copy" name="varcopy" onkeyup="saveValue(this)" tabindex="4" 
form="contact_form_id" type="checkbox" value="sendacopy" checked="checked" />

我需要存储复选框是否在页面重新加载时被选中或取消选中(复选框是否通过空格键或鼠标单击激活/停用(。我想为此使用localStorage，在普通的JavaScript中，没有jQuery。

我有这些函数来保存和恢复输入字段的值(它适用于所有文本输入，但不适用于复选框(：

function saveValue(e) {
    var id = e.id; 
    var val = e.value;
    localStorage.setItem(id, val);
}
function getSavedValue(v) {
    if (localStorage.getItem(v) === null) {
        return ""; 
    }
    return localStorage.getItem(v);
}

我

在网上做了很多研究，但我找不到我特别需要的东西。请对我温柔一点，我是初学者。这是我尝试用这两个函数做的，但它根本不起作用：

function saveValue(e) {
    var id = e.id; 
    var val = e.value;
    if (id == "copy") {
        val = e.checked;
    }
    localStorage.setItem(id, val);
}
function getSavedValue(v) {
    if (localStorage.getItem(v) === null) {
        return ""; 
    }
    if (v == "copy") {
        if (localStorage.getItem(v) == true)
            return "true";
        if (localStorage.getItem(v) == false)
            return "false";
    }
    return localStorage.getItem(v);
}

这就是我调用getSavedValue()函数的方式：

document.getElementById("copy").value = getSavedValue("copy");

好的，我正在取得进展，这是我的复选框：

<input id="copy" name="varcopy" onkeyup="saveChecked(this)" 
onmouseup="saveChecked(this)" tabindex="4"                     
form="contact_form_id" type="checkbox" />

这些是我的函数：

function saveChecked(e) {
    var id = e.id; 
    var val = e.checked?1:0;
    localStorage.setItem(id, val); 
}
function getSavedValue(v) {
    if (localStorage.getItem(v) === null) {
        return ""; 
    }
    return localStorage.getItem(v);
}

这是调用：

document.getElementById("copy").checked = !!getSavedValue("copy");

问题是它总是默认为 true，或者总是默认为 false。它不会切换。

这可以通过以下简单方式实现：

var isChecked = !!getSavedValue('someKey');
var checkbox = document.getElementById('copy');
checkbox.checked = isChecked;

!!getSavedValue('someKey');函数返回的值转换为布尔值。空字符串、undefined 和 null 将转换为 false，其他任何内容都将转换为 true。

这里是修改saveValue函数，您可以使用它。

function saveValue(e) {
    var id = e.id; 
    var val = e.value;
    if(e.type === 'checkbox') {
        val = e.checked?1:0;
    }
    localStorage.setItem(id, val);
}

复选框上的选中属性似乎返回真或假。(不知何故，未选中时为真，选中时为假(问题是，如果我这样做：

val = e.checked?1:0;

它将始终返回 1。我认为 checked 属性返回一个字符串，而不是布尔值，所以当我在 JavaScript 中执行上述操作时，它将始终是一个非空字符串，这意味着它将返回 true。我不得不这样做：

var val = ""; 
if (e.checked != true) { //Not-equals because true is unchecked, false is checked
    val = "1";
}

现在它可以工作了，复选框会在页面重新加载时记住其状态。

以下示例将为您执行此操作...享受... ：-(

<script>
function saveData(e) {
  let id = e.id; 
  let val;
  if (e.type === 'checkbox'){
    val = e.checked;
  }else{
    val = e.value;
  } 
  localStorage.setItem(id, val); 
}
function loadFieldData(id){
  let elm = document.getElementById(id);
  let value = localStorage.getItem(id);
  if (elm) {
    if (elm.type === 'checkbox') {
      elm.checked = Boolean(value);
    }else{
      elm.value = value;
    }
  }
}
function loadData() {
  loadFieldData('text1');
  loadFieldData('copy');
}
</script>
<body>
<input id="text1" onkeyup="saveData(this)" onchange="saveData(this)" type="text" />
<br/>
<input id="copy" onchange="saveData(this)" type="checkbox" />
<br/>
<br/>
<input type="button" onclick="loadData()" value="Load Data" />
</body>

相关内容

最新更新

热门标签：