CODEWITHSUNDEEP
javascripthtmlcsscheckbox
AggieDev
AggieDev

Reputation: 5045

Checkbox isn't checking to the correct value

I have what should be simple code, but for some reason I'm not getting what is wrong with the logic for setting the checkbox properly. I'm using local storage so that the checked state is persistent among sessions.

Here is my code. What is happening is for some reason even though the console.log prints out false when it should be false, or true when it should be true, either way the checkbox ends up being checked.

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

Upvotes: 0

Views: 61

Answers (2)

Sajib Biswas
Sajib Biswas

Reputation: 463

check the 3rd line from bottom. checkboxElement.checked expects a boolean value. If boolean value is not provided, it will coerce the value to boolean by following some rules (many times this conversion/coercion yields weird result).

isChecked contains "true"/"false" (as string). I have used a ternary operator to produce correct boolean representation of string "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);
}

Upvotes: 0

Arun P Johny
Arun P Johny

Reputation: 388316

Because localStorage stores the value as string, so when you have false, it is really stored as 'false' which is a truthy value so even if the checkbox was unchecked it will be marked as checked.

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

Demo: Fiddle

Upvotes: 2

Related Questions