Question

此脚本是根据此处的某个用户改编的，但是一旦我在复选框中添加了文本框，它就无法正常工作。

从http://jsfiddle.net/TzPW9/315/开始，一旦我点击问题2中的“其他”选项，无论我如何更改我的答案，它都会被卡住，一旦我刷新它将自动返回到“其他”选项。最有可能的问题是这条线以上

P.S我的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');
    });

Answer 1

原因

这一行的一个原因是：

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

改为使用：

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

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

然后会发生什么f.ex（action pseudo） -

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

set(31a, checked)

然后你加载它，因为。

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

现在设置选项二：

set(31b, checked);

现在加载并发生这种情况：

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

单选按钮只需要设置一个选项，因此强制选择一个选项并选择最后一个选项。这就是为什么总是设置最后一个选项。

解决方案

当您更改选项时，您需要删除（或清除）上一个选项。

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

第二种方法将要求您跟踪单选按钮组的分组，并在该组中的选项发生更改时相应地设置所有值。如果使用不同的表单，可以使用单独的前缀，并使用Object.keys(localStorage)迭代键来比较前缀（或类似的cookie函数）。

使用蛮力方法更新存储的工作版本：
http://jsfiddle.net/AbdiasSoftware/TzPW9/317/

function updateAll() {
    localStorage.clear(); //brute-force here..
    $('div.radio_button input').each(function () {
        storedData.set(this.id, $(this).is(':checked') ? 'checked' : 'not');
    });
}

触发它的代码：

$('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执行相同的操作，因此最好的选择可能是在您的存储对象上加入“清晰”方法。

Answer 2

经过一些调整后，我设法解决了本地存储问题，不是一种非常聪明的方法，但它有效...我还没有解决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);
    });

单选按钮与文本框绑定到localstorage或cookie无法正常工作

2 个答案:

原因

解决方案