Javascript 单选按钮将文本框绑定到本地存储或cookie无法正常工作

这个脚本是根据这里的一个用户改编的，但是一旦我添加了复选框bind with textbox，它就不能正常工作了

例如，从我单击问题2中的“其他人”选项开始，无论我如何更改答案，它都会被卡住，一旦我刷新，它将自动返回到“其他人”选项。最有可能的问题是这条线以后的问题

另外，我的javascript非常糟糕

谢谢你，我会感谢你的帮助

    $('div.radio_button input:radio').bind('change', function() {
        $('#' + this.id + 'box').toggle($(this).is(':checked'));
        // save the data on change
        storedData.set(this.id, $(this).is(':checked') ? 'checked' : 'not');
    }).each(function() {
        // on load, set the value to what we read from storage:
        var val = storedData.get(this.id);
        if (val == 'checked')
            $(this).attr('checked', 'checked');
        if (val == 'not')
            $(this).removeAttr('checked');
        if (val)
            $(this).trigger('change');
    });

原因 原因之一是这一行：

$(this).attr('checked', 'checked');

改用这个：

$(this).prop('checked', true);

另一个原因是，例如，当您在单选按钮中设置第二个选项时，您不会删除（或清除）存储器中以前的状态

然后发生的是f.ex（动作伪）-

设置选项1（您的31a）：

然后你加载它，因为

get(31a = checked)
get(32b = null)

现在设置选项二：

set(31b, checked);

现在加载并执行以下操作：

get(31a = checked)
get(32b = checked)

单选按钮只需设置一个选项，因此它将被迫选择一个选项，并将选择最后一个选项。这就是为什么最后一个选项总是被设置的原因

解决方案 更改选项时，需要删除（或清除）以前的选项

最简单的方法是清除存储并重新保存所有选项。不过，这对用户来说并不明显（除非您要保存数千个项目）

第二种方法要求您跟踪单选按钮组的分组，并在该组中的选项更改时相应地设置所有值。如果使用不同的形式，可以使用不同的前缀，并使用

Object.keys（localStorage）

迭代键以比较前缀（或类似的cookie函数）

使用蛮力方法更新存储的工作版本：

触发它的代码：

$('div.radio_button input:radio').bind('change', function () {
    $('#' + this.id + 'box').toggle($(this).is(':checked'));
    // save the data on change
    updateAll();
    //storedData.set(this.id, $(this).is(':checked') ? 'checked' : 'not');
});

---

当然，您也需要对Cookie执行同样的操作，因此最好的选择可能是在您的存储对象上合并一个“清除”方法。

经过一些调整后，我设法解决了本地存储问题，这不是一个非常聪明的方法，但它可以工作。。。我还没有解决饼干的问题

“我的盒子”的id按页码、问题号和选项排列

因此，31a是第3页问题1选项A，因此我设法去掉最后一个字母并删除“31”中的所有内容

    jQuery(function($) {
    // a key must is used for the cookie/storage
    var prefix = 'com_hop_boxes_';
    var storedData = getStorage(prefix);

    $('div.check_box input:checkbox').bind('change', function() {
        $('#' + this.id + 'box').toggle($(this).is(':checked'));
        // save the data on change
        storedData.set(this.id, $(this).is(':checked') ? 'checked' : 'not');
    }).each(function() {
        // on load, set the value to what we read from storage:
        var val = storedData.get(this.id);
        if (val == 'checked')
            $(this).attr('checked', 'checked');
        if (val == 'not')
            $(this).removeAttr('checked');
        if (val)
            $(this).trigger('change');
    });
    $('div.radio_button input:radio').bind('change', function() {
        $('#' + this.id + 'box').toggle($(this).is(':checked'));

        var sch = prefix + this.id;
        sch = sch.slice(0, -1);
        var sch = new RegExp(sch);

        Object.keys(localStorage)
                .forEach(function(key) {
            if (sch.test(key) && !(/box$/.test(key))) {
                localStorage.removeItem(key);
            }
        });

        // save the data on change
        storedData.set(this.id, $(this).is(':checked') ? 'checked' : 'not');
    }).each(function() {
        // on load, set the value to what we read from storage:
        var val = storedData.get(this.id);
        if (val == 'checked')
            $(this).prop('checked', true);
        if (val)
            $(this).trigger('change');
    });
    $('.addtext').bind('change', function() {
        storedData.set(this.id, $(this).val());
    }).each(function() {
        // on load, set the value to what we read from storage:
        var val = storedData.get(this.id);
        $(this).val(val);
    });

---

-1、隔离问题我不确定你的真正意思，但是我已经删除了工作正常的多余代码，并留下了有问题的部分。我不打算回顾这个问题，但我已经删除了dv。尽管我仍然相信你可以孤立这个问题。当您有几行代码复制问题而不是问题时，隔离就形成了。我们不希望看到您的所有代码，但我们确实希望看到几行独立的代码，它们仍然能够重新创建问题。感谢您的回答。现在我明白了为什么这个代码不能这样使用。我将尝试使用您提出的第二种方法找到解决方案。另一种方法是，我还将尝试按名称而不是ID存储，以便在设置选项A时，例如31=>31a。我不能使用暴力手段，因为这只是我将创建的多页调查的一页。再次感谢@lwj5暴力只是一个例子，因为错误在别处。您可以收集keys对象.keys（localStorage）并遍历它们，然后使用removeItem仅删除与此表单相关的键（提示：为每个表单使用特定前缀）。如果答案有帮助，请随意投票/标记接受。

$('div.radio_button input:radio').bind('change', function () {
    $('#' + this.id + 'box').toggle($(this).is(':checked'));
    // save the data on change
    updateAll();
    //storedData.set(this.id, $(this).is(':checked') ? 'checked' : 'not');
});

    jQuery(function($) {
    // a key must is used for the cookie/storage
    var prefix = 'com_hop_boxes_';
    var storedData = getStorage(prefix);

    $('div.check_box input:checkbox').bind('change', function() {
        $('#' + this.id + 'box').toggle($(this).is(':checked'));
        // save the data on change
        storedData.set(this.id, $(this).is(':checked') ? 'checked' : 'not');
    }).each(function() {
        // on load, set the value to what we read from storage:
        var val = storedData.get(this.id);
        if (val == 'checked')
            $(this).attr('checked', 'checked');
        if (val == 'not')
            $(this).removeAttr('checked');
        if (val)
            $(this).trigger('change');
    });
    $('div.radio_button input:radio').bind('change', function() {
        $('#' + this.id + 'box').toggle($(this).is(':checked'));

        var sch = prefix + this.id;
        sch = sch.slice(0, -1);
        var sch = new RegExp(sch);

        Object.keys(localStorage)
                .forEach(function(key) {
            if (sch.test(key) && !(/box$/.test(key))) {
                localStorage.removeItem(key);
            }
        });

        // save the data on change
        storedData.set(this.id, $(this).is(':checked') ? 'checked' : 'not');
    }).each(function() {
        // on load, set the value to what we read from storage:
        var val = storedData.get(this.id);
        if (val == 'checked')
            $(this).prop('checked', true);
        if (val)
            $(this).trigger('change');
    });
    $('.addtext').bind('change', function() {
        storedData.set(this.id, $(this).val());
    }).each(function() {
        // on load, set the value to what we read from storage:
        var val = storedData.get(this.id);
        $(this).val(val);
    });