使用单选按钮显示div

Question

I want to show divs when i check one of the 2 radio buttons. The problem is it always shows the divs at this point.

I am also working with cookies to store the choice when i refresh the page. When i work with checkboxes both the divs and the cookies are working perfectly, besides the problem that it is possible to select both checkboxes. That's why i choose to use radio buttons, but now the divs and the cookies both aren't working anymore.

<div class="check">
<p><input type="radio" value="Name" id="name" name="group[]" /> <label for="name">Name</label></p>  
<p><input type="radio" value="Reference " id="reference" name="group[]" /> <label for="reference">Reference</label></p></div>


<div id="nametxt"> Show Name TEXT </div>
<div id="referencetxt"> Show Ref TEXT </div>
<div id="referencetxt2"> Show Ref TEXT </div>

This is my jquery:

function getStorage(key_prefix) {
// this function will return us an object with a "set" and "get" method
// using either localStorage if available, or defaulting to document.cookie
if (window.localStorage) {
    // use localStorage:
    return {
        set: function(id, data) {
            localStorage.setItem(key_prefix+id, data);
        },
        get: function(id) {
            return localStorage.getItem(key_prefix+id);
        }
    };
} else {
    // use document.cookie:
    return {
        set: function(id, data) {
            document.cookie = key_prefix+id+'='+encodeURIComponent(data);
        },
        get: function(id, data) {
            var cookies = document.cookie, parsed = {};
            cookies.replace(/([^=]+)=([^;]*);?\s*/g, function(whole, key, value) {
                parsed[key] = unescape(value);
            });
            return parsed[key_prefix+id];
        }
    };
}}
 jQuery(function($) {
// a key must is used for the cookie/storage
var storedData = getStorage('com_mysite_checkboxes_'); 

$('div.check input:radio').bind('change',function(){        
    $('#'+this.id+'txt').toggle($(this).is(':checked'))
    $('#'+this.id+'txt2').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');
});});

I have made a fiddle: http://jsfiddle.net/8kzwovkp/

Answer 1

You were using jQuery in your jsfiddle but hadn't added it.

EDITED:

var storedData = getStorage('com_mysite_checkboxes_');

$('input[name="group[]"]').on('change', function () {
    if ($(this).val() == "Name") {
        $('#nametxt').show();
        $('#referencetxt').hide();
    } else {
        $('#nametxt').hide();
        $('#referencetxt').show();
    }
    $('input[name="group[]"]').each(function() {
        storedData.set(this.id, $(this).is(':checked') ? 'checked' : 'not');
    });
}).each(function() {
    var val = storedData.get(this.id);
    if (val == 'checked') {
        $(this).attr('checked', 'checked');
        $(this).trigger('change');
    }
    else if (val == 'not')
        $(this).removeAttr('checked');
});

jsfiddle DEMO

Answer 2

You could do something as simple as CSS visibility or opacity 0, but that wouldn't solve your cookie problem. You'd have to let us have a look at your code for that.