locked
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!

    Thursday, June 27, 2013 10:39 AM

Answers

  • 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; 
            },

    • Marked as answer by jag0 Friday, June 28, 2013 5:39 PM
    Thursday, June 27, 2013 11:53 AM
  • 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!

    • Marked as answer by jag0 Friday, June 28, 2013 5:39 PM
    Friday, June 28, 2013 4:19 PM

All replies

  • 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; 
            },

    • Marked as answer by jag0 Friday, June 28, 2013 5:39 PM
    Thursday, June 27, 2013 11:53 AM
  • Hi Ealsur!

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

    Best regards!

    Friday, June 28, 2013 9:33 AM
  • 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!

    Friday, June 28, 2013 11:55 AM
  • 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.

    Friday, June 28, 2013 2:02 PM
  • 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...

    Friday, June 28, 2013 4:03 PM
  • 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!

    • Marked as answer by jag0 Friday, June 28, 2013 5:39 PM
    Friday, June 28, 2013 4:19 PM
  • That's great! :) Thank you!!! :)))
    Friday, June 28, 2013 4:43 PM
  • Glad it helped, please don't forget to mark the answer, it helps to clear the unanswered thread list :D
    Friday, June 28, 2013 4:49 PM