Save checkboxes states - Angular, Vue, React, Web Components, Javascript, HTML5 Widgets

Tagged: checkbox, checkChange, cookies, jqxListBox, ListBox, LocalStorage, save, state, values

This topic contains 2 replies, has 2 voices, and was last updated by jan 10 years, 7 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)

Author

Save checkboxes states Posts

April 8, 2014 at 10:43 am Save checkboxes states #52699

jan

Participant

Hi!
How to save checkboxes checked/unchecked state to cookies or memory?
I am using checkboxes in listbox outside grid to show/hide columns. For columns there are autoloadstate, autosavestate. They are working. But checkboxes after page refres stay in checked or unchecked (checkIndex or uncheckIndex) state. Now I have

$("#jqxlistbox").on('checkChange', function (event) {
        checkstate = $("#jqxlistbox").jqxListBox('getItems');
        localStorage.setItem("checks", checkstate);

        $("#jqxgrid").jqxGrid('beginupdate');
        if (event.args.checked) {
            $("#jqxgrid").jqxGrid('showcolumn', event.args.value);
        } else {
            $("#jqxgrid").jqxGrid('hidecolumn', event.args.value);
        }
        $("#jqxgrid").jqxGrid('endupdate');
    });

At jqxlistbox there is source from listSource.

var listSource = [
        {
        label: 'Samples',
        value: 'samp'
    }, ....

onLoad start I have variable che = localStorage.checks;
How to use che to bind checked/unchecked states to listbox checkboxes or cookies for this?

April 9, 2014 at 6:32 am Save checkboxes states #52761

Dimitar

Participant

Hello jan,

The following example shows how to save the checked listbox indexes in a cookie:

<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.10.2.min.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxlistbox.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcheckbox.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            var checkedArray = $.jqx.cookie.cookie("jqxListBox_checkstate");
            if (checkedArray == undefined) {
                checkedArray = [];
            } else {
                checkedArray = checkedArray.split(",");
            };

            var source = [
                    "Affogato",
                    "Americano",
                    "Bicerin",
		        ];

            // Create a jqxListBox
            $("#listbox").jqxListBox({ width: 200, source: source, checkboxes: true, height: 100 });

            for (var i = 0; i < checkedArray.length; i++) {
                $("#listbox").jqxListBox('checkIndex', parseInt(checkedArray[i]));
            };

            $("#listbox").on('checkChange', function (event) {
                var args = event.args;
                if (args.checked == true) {
                    checkedArray.push(args.item.index);
                } else {
                    var index = checkedArray.indexOf((args.item.index).toString());
                    if (index != -1) {
                        checkedArray.splice(index, 1);
                    };
                };

                $.jqx.cookie.cookie("jqxListBox_checkstate", checkedArray);
            });
        });
    </script>
</head>
<body>
    <div id="listbox">
    </div>
</body>
</html>

Best Regards,
Dimitar

jQWidgets team
http://www.jqwidgets.com/

April 13, 2014 at 9:18 pm Save checkboxes states #53006

jan

Participant

Muchas Gracias!

Author

Posts

Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.