チェックボックスが正しい値にチェックしていません

Question

シンプルなコードにする必要がありますが、何らかの理由でチェックボックスを正しく設定するロジックが間違っていません。チェックされた状態がセッション間で永続的になるように私はローカルストレージを使用しています。

ここに私のコードです。何が起こっているのかは、何らかの理由で、console.logがfalseであるべきときにfalseを出力するか、trueでなければならないときにtrueを出力する。どちらかの方法でチェックボックスがチェックされる。

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は、チェックボックスをチェックして、それがマークされますチェックを外した場合でもそうtruthy値である文字列として値を格納するので、あなたはfalseを持っているとき、それは本当に'false'として格納されるため。

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

デモ：Fiddle

Answer 2

下から3行目を確認してください。 checkboxElement.checkedにはブール値が必要です。ブール値が指定されていない場合は、いくつかの規則に従って値をブール値に強制します（この変換/強制は何度も奇妙な結果をもたらします）。

isCheckedには、 "true"/"false"（文字列として）が含まれています。私は文字列 "真"/"偽"の正しいブール表現を生成するために三項演算子を使用しました。

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