Radio button bind with textbox to localstorage or

问题:

This script is adapted from one of the user here, however once I added in the checkbox bind with textbox, it doesnt work properly.

E.g from http://jsfiddle.net/TzPW9/315/ once I click on 'others' option in question 2 it is stuck no matter how I change my answer, once I refresh it will automatically return to 'others' option. Most likely the issue is with this line onwards

P.S my javascript is really quite bad.

Thank you I will appreciate any help!

    $('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');
    });

回答1:

Cause

One reason is this line:

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

use this instead:

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

The other reason is that when you for example set the second option in your radio buttons you don't delete (or clear) the previous status in the storage.

What happens then is f.ex (action pseudo) -

Setting option 1 (your 31a):

set(31a, checked)

Then you load and it works because.

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

Now set option two:

set(31b, checked);

Now load and this happen:

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

A radio button needs to have only one option set, so it is forced to pick one and will chose the last one. That's why the last option is always set.

Solution

when you change option you need to delete (or clear) the previous option.

The simplest way is to clear the storage and save all options over again. This is not noticeable for the user though (unless you have thousands of items to save).

The second method will require you to keep track of the grouping of the radio button group and set all the values accordingly when an option in that group changes. You can use separate prefixes if you use different forms and use Object.keys(localStorage) to iterate through the keys to compare prefixes (or similar function for cookies).

Working version with a brute-force approach on updating storage:
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');
    });
}

The code that triggers it:

$('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');
});

Of course you will need to do the same for cookies so the best choice is probably to incorporate a 'clear' method on your storage object.

回答2:

After some tweaking, I managed to solve the localstorage issue, not a very smart way but it works... I have yet to solve the cookie issue

the id of my boxes works by page no. followed by question no. followed by option

hence 31a is page 3 question 1 option A so I managed to strip the last letter and delete everything within '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);
    });