0

我想隐藏/显示一些 div 的元素，取决于复选框。我有复选框，状态已保存到 localStorage 但刷新后我的 DIV 元素未保存（以默认状态加载）。jQuery（-移动）。非常感谢您的帮助。

<fieldset data-role="controlgroup" data-type="vertical" data-mini="true">
    <legend>Some text.</legend>
    <div id="checkbox1">
        <label>
            <input type="checkbox" data-theme="a" name="ligne1" data-iconpos="right" checked="checked" />Ligne 1</label>
    </div>
    <div id="checkbox2">
        <label>
            <input type="checkbox" data-theme="a" name="ligne2" data-iconpos="right" checked="checked" />Ligne 2</label>
    </div>
    <div id="checkbox3">
        <label>
            <input type="checkbox" data-theme="a" name="ligne3" data-iconpos="right" checked="checked" />Ligne 3</label>
    </div>
    <fieldset>

$(document).ready(function () {
function getCurrentValue(checkMe) {
    return checkMe.is(':checkbox') ? checkMe.prop('checked') : checkMe.val();
}

function checkvalues() {
    var original = true;
    $(':input').each(function () {
        if (getCurrentValue($(this)) !== $(this).data('originalvalue')) {
            original = false;
        }
    });

    return original;
}

if (localStorage) {

    $(':input').each(function () {

        $(this).data('originalvalue', getCurrentValue($(this)));
    });

    $('#checkbox1').on('change', ':input', function () {
        if (checkvalues()) {
            $('#ligne1').show();
        } else {
            $('#ligne1').hide();
        }
    });

    $('#checkbox2').on('change', ':input', function () {
        if (checkvalues()) {
            $('#ligne2').show();
        } else {
            $('#ligne2').hide();
        }
    });

    $('#checkbox3').on('change', ':input', function () {
        if (checkvalues()) {
            $('#ligne3').show();
        } else {
            $('#ligne3').hide();
        }
    });

}});

现场示例在这里。

4

1 回答 1

0

您需要在代码中添加集合并从 localStorage 获取。

要设置数据，您需要这样的东西：

// First we setup the data in key/value pairs
var dataContainer = { 'check1':'checked', 'check2':'notchecked'}
// Then save it to localStorage
localStorage.setItem('storedData', JSON.stringify(dataContainer));

并从 localStorage 获取数据：

var dataRetrieved = localStorage.getItem('storedData');
console.log('Local Storage data:', JSON.parse(dataRetrieved))

有关 localStorage MDN 本地存储的更多信息

于 2015-09-04T09:45:54.740 回答