Javascript - 如何設置基於變量選中的復選框

Question

我已盡最大努力搜索所有答案，但找不到任何可以專門回答此問題的內容。 所以，如果你發現了什么，請告訴我，我會立即刪除它。

我創建了一個 JSFiddle 來顯示我的問題（下面復制了 JS 部分以便於參考）： http : //jsfiddle.net/hg67R/1/

當我嘗試根據變量的值設置復選框的值時，它似乎無法正確設置。 我創建的示例應該保存每個復選框的當前狀態（這是正確的）。 然后，無論您如何更改這些復選框，都應該在您單擊加載時將它們更改回來。 存儲變量是正確的，但它沒有正確設置復選框。 我確定這是顯而易見的，但我肯定看不到。

function save() {
    localStorage.setItem("numbers", document.getElementById("Numbers").checked);
    localStorage.setItem("tips", document.getElementById("Tips").checked);
}

function load() {
    document.getElementById("Numbers").checked = localStorage.numbers;
    document.getElementById("Tips").checked = localStorage.tips;

    console.log("numbers storage: " + localStorage.numbers);
    console.log("numbers box: " + document.getElementById("Numbers").checked);
    console.log("tips storage: " + localStorage.tips);
    console.log("tips box: " + document.getElementById("Tips").checked);
}

console.logs 只是告訴我變量正在正確存儲和加載。

謝謝！

Answer 1

除了 mrk 的回答：

 function save() { localStorage.setItem("numbers", document.getElementById("Numbers").checked); localStorage.setItem("tips", document.getElementById("Tips").checked); } function load() { document.getElementById("Numbers").checked = localStorage.numbers === 'true'; document.getElementById("Tips").checked = localStorage.tips === 'true'; console.log("numbers storage: " + localStorage.numbers); console.log("numbers box: " + document.getElementById("Numbers").checked); console.log("tips storage: " + localStorage.tips); console.log("tips box: " + document.getElementById("Tips").checked); }

 <input type="checkbox" id="Numbers">Short Numbers</input> <input type="checkbox" id="Tips">Show Tips</input> <br /> <br /> <button type="button" onClick="save()">Save</button> <button type="button" onClick="load()">Load</button>

最大的變化是我檢查 localStorage 值是否與“true”完全一致。

document.getElementById("Numbers").checked = localStorage.numbers === 'true';

Answer 2

兩件事情：

Localstorage 存儲字符串鍵和字符串值

復選框的 checked 屬性的正確值在此處清楚地描述：

HTML 復選框的選中屬性的正確值是多少？

具體來說，這部分：

當設置了控制元素的檢查屬性時，開關處於“打開”狀態。

這意味着，在那里放什么並不重要，實際上只需要對其進行定義即可。 將檢查以下所有內容：

<input name="checkbox_name" id="checkbox_id" type="checkbox" checked>
<input name="checkbox_name" id="checkbox_id" type="checkbox" checked="yes"> 
<input name="checkbox_name" id="checkbox_id" type="checkbox" checked="no"> 
<input name="checkbox_name" id="checkbox_id" type="checkbox" checked="blue">
<input name="checkbox_name" id="checkbox_id" type="checkbox" checked="false">

並且只有以下內容不會被選中：

<input name="checkbox_name" id="checkbox_id" type="checkbox">