Save checkbox state with javascipt

Question

Hello!

I have a checkbox-list and I want that they stay checked (if checked) or unchecked (if unchecked), when I go back and forth through the pages of my app or when i restart it. I have read this article http://msdn.microsoft.com/de-de/library/windows/apps/jj663505.aspx and tried to do it like this. here is my code:

(function () {
    "use strict";

    WinJS.UI.Pages.define("/pages/einstellungen/einstellungen.html", {
      
        ready: function (element, options) {
            // TODO: Die Seite hier initialisieren.

            // Retrieve the checkbox value and register our
            // event handler.
            var checkboxState = document.getElementById("saveEnergy");
            checkboxState.addEventListener("change", this.checkboxStateChanged);

            // Restore app data. 
            var roamingSettings = Windows.Storage.ApplicationData.current.roamingSettings;

            // Restore the checkbox value.
            var checkbox1 =
                Windows.Storage.ApplicationData.current.roamingSettings.values["checkbox1"];
            if (checkbox1) {
                checkboxState.value = checkbox1;
            }

        },

        checkboxStateChanged: function (eventInfo) {
           
            var checkboxState = eventInfo.srcElement;
            var checkbox1 = document.getElementById("saveEnergy").value;

            // Store the checkbox's state for multiple sessions.
            var appData = Windows.Storage.ApplicationData.current; 
            var roamingSettings = appData.roamingSettings; 
            roamingSettings.values["checkbox1"] = checkboxState.value; 
        },

        unload: function () {...

and here is the list with checkboxes:

 <li>
                    <label><input id="saveEnergy" class="checkboxSettings" type="checkbox" />
                    <h2>Ignore the save-energy setting</h2>
                    </label>
                </li>
                <hr class="line">
                <li>
                    <label><input id="browse" class="checkboxSettings" type="checkbox" />
                    <h2>browse automatically</h2>
                    </label>
                </li>
                <hr class="line">
                <li>
                    <label><input id="restart" class="checkboxSettings" type="checkbox" />
                    <h2>automatic restart</h2>
                    </label>
                </li>

I hope someone can help!

Answer 1

Hi,

Don't use the ".value" on the checkbox, use the ".checked", it's a boolean. Try:

ready: function (element, options) {
            // TODO: Die Seite hier initialisieren.

            // Retrieve the checkbox value and register our
            // event handler.
            var checkboxState = document.getElementById("saveEnergy");
            checkboxState.addEventListener("change", this.checkboxStateChanged);

            // Restore app data. 
            var roamingSettings = Windows.Storage.ApplicationData.current.roamingSettings;

            // Restore the checkbox value.
            var checkbox1 =
                Windows.Storage.ApplicationData.current.roamingSettings.values["checkbox1"];
            if (checkbox1) {
                checkboxState.checked = checkbox1;
            }

        },

        checkboxStateChanged: function (eventInfo) {
           
            
            var appData = Windows.Storage.ApplicationData.current; 
            var roamingSettings = appData.roamingSettings; 
            roamingSettings.values["checkbox1"] = checkboxState.checked; 
        },

Answer 2

Hi Ealsur!

That was easy! Thank you so very much! Now it functions! :))

Best regards!

Answer 3

Just one more question. The example above functions for just one checkbox. Now I want that all three checkboxes stay checked... I tried to do this with "document.getElementsByClassName", but it does't function. Here is my piece of code:

 ready: function (element, options) {
           
            // Retrieve the checkbox value and register our
            // event handler.
            var checkboxState = document.getElementsByClassName("checkboxSettings");
            for (var i = 0; i < checkboxState.length; i++) {
                checkboxState[i].addEventListener("change", this.checkboxStateChanged);;
            }

            // Restore app data. 
            var roamingSettings = Windows.Storage.ApplicationData.current.roamingSettings;

            // Restore the checkbox value.
            var checkbox1 =
                Windows.Storage.ApplicationData.current.roamingSettings.values["checkbox1"];
            if (checkbox1) {
                checkboxState.checked = checkbox1;
            }

        },

        checkboxStateChanged: function (eventInfo) {
           
            var checkboxState = eventInfo.srcElement;

            var checkbox1 = document.getElementsByClassName("checkboxSettings").value;

            // Store the checkbox's state for multiple sessions.
            var appData = Windows.Storage.ApplicationData.current; 
            var roamingSettings = appData.roamingSettings; 
            roamingSettings.values["checkbox1"] = checkboxState.checked; 
        },

Best regards!

Answer 4

Try this :)

ready: function (element, options) {
           
	var roamingSettings = Windows.Storage.ApplicationData.current.roamingSettings;
	
	var checkboxes = element.querySelectorAll(".checkboxSettings");
	var that=this;
	checkboxes.forEach(function(aCheckbox){
		aCheckbox.addEventListener("change", that.checkboxStateChanged);
		if(Windows.Storage.ApplicationData.current.roamingSettings.values["checkbox_"+aCheckbox.id])
			aCheckbox.checked = Windows.Storage.ApplicationData.current.roamingSettings.values["checkbox_"+aCheckbox.id];
	});
},

checkboxStateChanged: function (eventInfo) {
	var roamingSettings = Windows.Storage.ApplicationData.current.roamingSettings;
	
	var checkboxState = eventInfo.srcElement;
	roamingSettings.values["checkbox_"+checkboxState.id] = checkboxState.checked; 
},

This is assuming each of your checkboxes has a different Id (which they should), it will store each checkbox state in a different roamingSettings value.

Answer 5

Hello Ealsur!Thank you again for a fast reply. I tried your code, but I got an error: The Object doesn't support a property or a method "forEach"... Could it be because

element.querySelectorAll(".checkboxSettings");

is a List and "forEach"-Method needs an Array?

Thanx beforehand...

Answer 6

Indeed, was my typo, I was building the code using an App I already have that did something similar and I had an array, this should work:

ready: function (element, options) {
           
	var roamingSettings = Windows.Storage.ApplicationData.current.roamingSettings;
	
	var checkboxes = element.querySelectorAll(".checkboxSettings");
	var that=this;

	for (var cIndex = 0; cIndex < checkboxes.length; cIndex++) {
        var aCheckbox = checkboxes[cIndex];
		aCheckbox.addEventListener("change", that.checkboxStateChanged);
		if(Windows.Storage.ApplicationData.current.roamingSettings.values["checkbox_"+aCheckbox.id])
			aCheckbox.checked = Windows.Storage.ApplicationData.current.roamingSettings.values["checkbox_"+aCheckbox.id];
	};
},

checkboxStateChanged: function (eventInfo) {
	var roamingSettings = Windows.Storage.ApplicationData.current.roamingSettings;
	
	var checkboxState = eventInfo.srcElement;
	roamingSettings.values["checkbox_"+checkboxState.id] = checkboxState.checked; 
},

Sorry!

Answer 7

That's great! :) Thank you!!! :)))

Answer 8

Glad it helped, please don't forget to mark the answer, it helps to clear the unanswered thread list :D