Question

我想在检查2个单选按钮中的一个时显示div。问题是它总是在这一点上显示div。

我还在使用cookie来存储刷新页面时的选择。当我使用复选框时，div和cookie都完美地工作，除了可以选择两个复选框的问题。这就是我选择使用单选按钮的原因，但现在div和cookies都不再适用了。

<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>

这是我的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');
});});

我做了一个小提琴：http://jsfiddle.net/8kzwovkp/

Answer 1

你在jsfiddle中使用了jQuery但没有添加它。

已编辑：

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

你可以做一些像CSS可见性或不透明度0那样简单的事情，但这不会解决你的cookie问题。您必须让我们查看您的代码。

使用单选按钮显示div

2 个答案: