Question

我有什么应该是简单的代码，但由于某种原因，我没有弄清楚正确设置复选框的逻辑有什么问题。我正在使用本地存储，以便在会话中持续检查状态。

这是我的代码。发生的事情是出于某种原因，即使console.log在错误时打印出来是假的，或者当它应该为真时打印出来，无论哪种方式最终都要检查复选框。

var checkboxElement = document.getElementById("checkbox").getElementsByTagName('input')[0]

    checkboxElement.addEventListener('click', function() {
        console.log(checkboxElement.checked)
        if (localStorage != undefined) {
            localStorage.setItem("checkbox", checkboxElement.checked)
        }
    });

    if(localStorage != undefined)
    {
        console.log("Local storage supported.");

        //set defaults
        if (localStorage.getItem("checkbox") == undefined) {
            localStorage.setItem("checkbox", false)
        }

        var isChecked = localStorage.getItem("checkbox")
        checkboxElement.checked = isChecked
        console.log(isChecked)
    }

Answer 1

因为localStorage将值存储为字符串，所以当你有false时，它实际上存储为'false'这是一个真值，所以即使取消选中该复选框，它也会被标记为已选中。

var isChecked = localStorage.getItem("checkbox") === 'true';
checkboxElement.checked = isChecked;
console.log(isChecked)

演示：Fiddle

Answer 2

从底部检查第3行。 checkboxElement.checked需要一个布尔值。如果没有提供布尔值，它将通过遵循一些规则将值强制转换为布尔值（很多时候这种转换/强制会产生奇怪的结果）。

isChecked包含＆＃34; true＆＃34; /＆＃34; false＆＃34; （作为字符串）。我使用了一个三元运算符来生成字符串的正确布尔表示＆＃34; true＆＃34; /＆＃34; false＆＃34;。

var checkboxElement = document.getElementById("checkbox").getElementsByTagName('input')[0]

checkboxElement.addEventListener('click', function () {
    console.log(checkboxElement.checked)
    if (localStorage != undefined) {
        localStorage.setItem("checkbox", checkboxElement.checked)
    }
});

if (localStorage != undefined)
{
    console.log("Local storage supported.");

    //set defaults
    if (localStorage.getItem("checkbox") == undefined) {
        localStorage.setItem("checkbox", false)
    }

    var isChecked = localStorage.getItem("checkbox");


    // .checked property needs boolean value. Thats why the following line is re-coded to produce a boolean.
    checkboxElement.checked = isChecked === "false" ? false : true;
    console.log(isChecked);
}

复选框未检查正确的值

2 个答案: