通过复选框 cookie 显示和隐藏 div答案

【问题标题】：Show and hide div by checkbox cookies通过复选框 cookie 显示和隐藏 div
【发布时间】：2016-01-20 23:38:56
【问题描述】：

如何更改 jquery 源，以便我的网站记住用户可能在 24 小时内检查哪个框？？

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Show Hide Using Checkboxes</title>
<style type="text/css">
    .box{
        padding: 20px;
        display: none;
        margin-top: 20px;
        border: 1px solid #000;
    }
    .red{ background: #ff0000; }
    .green{ background: #00ff00; }
    .blue{ background: #0000ff; }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
    $('input[type="checkbox"]').click(function(){
        if($(this).attr("value")=="red"){
            $(".red").toggle();
        }
        if($(this).attr("value")=="green"){
            $(".green").toggle();
        }
        if($(this).attr("value")=="blue"){
            $(".blue").toggle();
        }
    });
});
</script>
</head>
<body>
    <div>
        <label><input type="checkbox" name="colorCheckbox" value="red"> red</label>
        <label><input type="checkbox" name="colorCheckbox" value="green"> green</label>
        <label><input type="checkbox" name="colorCheckbox" value="blue"> blue</label>
    </div>
    <div class="red box">You have selected <strong>red checkbox</strong> so i am here</div>
    <div class="green box">You have selected <strong>green checkbox</strong> so i am here</div>
    <div class="blue box">You have selected <strong>blue checkbox</strong> so i am here</div>
</body>
</html>

我知道那里有很多，但我认为这个是最简单和最容易的。我已经在我的网站中实现了它。

【问题讨论】：

欢迎来到 Stack Overflow。我已经针对一些英语问题调整了您的帖子。请在此处复制并粘贴源代码，而不是链接到它。如果您希望其他人付出努力来帮助您，那么您需要付出努力。
你好，这不是我不想粘贴它，我觉得链接上更容易。但它就在这里。 :) 感谢您的编辑
彼得，不鼓励仅链接的帖子，属于低质量帖子类别，有些会被删除。既然你已经把它变成了一个高质量的问题，我投了赞成票。
我怎样才能修改我的帖子以便其他人可以看到它？
有三种方式。 1）使标题更有趣。 2）提供赏金，但您没有足够的代表。 3）希望有超级代表的人给予赏金。我又添加了 2 个标签，这可能会有所帮助。

标签： jquery html cookies show show-hide

【解决方案1】：

存储 cookie 很容易。首先，您需要像这样确定到期日期：

    var expiryDate = new Date();
    expiryDate.setDate(expiryDate.getDate() + 1); // 1 is the number of days to add, which is more intuitive than 24 hours.
    expiryDate = expiryDate.toUTCString();

现在将此代码添加到它们各自的 if 块（单击复选框时执行的块）：

document.cookie="red=" + this.checked.toString() + "; expires=" + expiryDate;
        document.cookie="green=" + this.checked.toString() + "; expires=" + expiryDate;
        document.cookie="blue=" + this.checked.toString() + "; expires=" + expiryDate;

为了读取 cookie，辅助函数可能会派上用场，我在这里找到了下面的函数（由 Mac 制作）：https://stackoverflow.com/a/25490531/4645674

function getCookieValue(a) {
    var b = document.cookie.match('(^|;)\\s*' + a + '\\s*=\\s*([^;]+)');
    return b ? b.pop() : '';
}

然后，在文档准备好时运行的函数开始时，您可以检查 cookie 是否存在。如果有，请勾选复选框是否应该勾选。

var redEl = $('input[value="red"]');
var greenEl = $('input[value="green"]');
var blueEl = $('input[value="blue"]');

if (document.cookie.indexOf('red=') != -1) {
    redEl.prop("checked", $.parseJSON(getCookieValue("red"))); //$.parseJSON(string) parses a boolean from a string
}

if (document.cookie.indexOf('green=') != -1) {
    greenEl.prop("checked", $.parseJSON(getCookieValue("green"))); //$.parseJSON(string) parses a boolean from a string
}

if (document.cookie.indexOf('blue=') != -1) {
    blueEl.prop("checked", $.parseJSON(getCookieValue("blue"))); //$.parseJSON(string) parses a boolean from a string
}

接下来，如果选中了各自的复选框，则显示 div。

$(".red").toggle(redEl.prop("checked"));
$(".green").toggle(greenEl.prop("checked"));
$(".blue").toggle(blueEl.prop("checked"));

现在，它应该看起来有点像这样：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>jQuery Show Hide Using Checkboxes</title>
<style type="text/css">
    .box{
        padding: 20px;
        display: none;
        margin-top: 20px;
        border: 1px solid #000;
    }
    .red{ background: #ff0000; }
    .green{ background: #00ff00; }
    .blue{ background: #0000ff; }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">

function getCookieValue(a) {
    var b = document.cookie.match('(^|;)\\s*' + a + '\\s*=\\s*([^;]+)');
    return b ? b.pop() : '';
}

$(document).ready(function(){

    var redEl = $('input[value="red"]');
    var greenEl = $('input[value="green"]');
    var blueEl = $('input[value="blue"]');

    if (document.cookie.indexOf('red=') != -1) {
        redEl.prop("checked", $.parseJSON(getCookieValue("red")));
    }

    if (document.cookie.indexOf('green=') != -1) {
        greenEl.prop("checked", $.parseJSON(getCookieValue("green")));
    }

    if (document.cookie.indexOf('blue=') != -1) {
        blueEl.prop("checked", $.parseJSON(getCookieValue("blue")));
    }

    $(".red").toggle(redEl.prop("checked"));
    $(".green").toggle(greenEl.prop("checked"));
    $(".blue").toggle(blueEl.prop("checked"));

    $('input[type="checkbox"]').click(function(){

        var expiryDate = new Date();
        expiryDate.setDate(expiryDate.getDate() + 1);
        expiryDate = expiryDate.toUTCString();

        if($(this).attr("value")=="red"){
            $(".red").toggle(this.checked);
            document.cookie="red=" + this.checked.toString() + "; expires=" + expiryDate;
        }
        if($(this).attr("value")=="green"){
            $(".green").toggle(this.checked);
            document.cookie="green=" + this.checked.toString() + "; expires=" + expiryDate;
        }
        if($(this).attr("value")=="blue"){
            $(".blue").toggle(this.checked);
            document.cookie="blue=" + this.checked.toString() + "; expires=" + expiryDate;
        }
    });
});
</script>
</head>
<body>
    <div>
        <label><input type="checkbox" name="colorCheckbox" value="red"> red</label>
        <label><input type="checkbox" name="colorCheckbox" value="green"> green</label>
        <label><input type="checkbox" name="colorCheckbox" value="blue"> blue</label>
    </div>
    <div class="red box">You have selected <strong>red checkbox</strong> so i am here</div>
    <div class="green box">You have selected <strong>green checkbox</strong> so i am here</div>
    <div class="blue box">You have selected <strong>blue checkbox</strong> so i am here</div>
</body>
</html>

我希望这会有所帮助！

【讨论】：

您好，这很有帮助，非常好。这个的好处是它会根据您上次访问时的设置方式检查/取消选中这些框。我喜欢这个主意。 :) 谢谢
@Peter 没问题！ :)

【解决方案2】：

我会通过设置为 24 小时后过期的 Cookie 来解决这个问题。 JSFiddle

$(document).ready(function(){
    if(getCookie("checkBoxColorRed").localeCompare("true") == 0) {
        $("#checkBoxColorRed").prop('checked', true);
        $(".red").toggle();
    }
    if(getCookie("checkBoxColorGreen").localeCompare("true") == 0) {
        $("#checkBoxColorGreen").prop('checked', true);
        $(".green").toggle();
    }
    if(getCookie("checkBoxColorBlue").localeCompare("true") == 0) {
        $("#checkBoxColorBlue").prop('checked', true);
        $(".blue").toggle();
    }

    $('input[type="checkbox"]').click(function(){
        if($(this).attr("value")=="red"){
            $(".red").toggle();
            deleteOrCreateCookie("checkBoxColorRed");
        }
        if($(this).attr("value")=="green"){
            $(".green").toggle();
            deleteOrCreateCookie("checkBoxColorGreen");
        }
        if($(this).attr("value")=="blue"){
            $(".blue").toggle();
            deleteOrCreateCookie("checkBoxColorBlue");
        }
    });
});

function getTimeString() {
    var d = new Date();
    d.setTime(d.getTime() + (1*24*60*60*1000));
    return "expires="+d.toUTCString();
}

function getCookie(cname) {
    var name = cname + "=";
    var ca = document.cookie.split(';');
    for(var i=0; i<ca.length; i++) {
        var c = ca[i];
        while (c.charAt(0)==' ') c = c.substring(1);
        if (c.indexOf(name) == 0) return c.substring(name.length,c.length);
    }
    return "";
} 

function deleteOrCreateCookie(name) {
    if ($("#"+name).prop('checked')) {
        document.cookie = name + "=true; " + getTimeString();
    }
    else
    {
        document.cookie = name +"=; -1";
    }
}

HTML：

<div>
    <label><input type="checkbox" id="checkBoxColorRed" name="colorCheckbox" value="red"> red</label>
        <label><input type="checkbox" id="checkBoxColorGreen" name="colorCheckbox" value="green"> green</label>
            <label><input type="checkbox" id="checkBoxColorBlue" name="colorCheckbox" value="blue"> blue</label>
                </div>
            <div class="red box">You have selected <strong>red checkbox</strong> so i am here</div>
            <div class="green box">You have selected <strong>green checkbox</strong> so i am here</div>
            <div class="blue box">You have selected <strong>blue checkbox</strong> so i am here</div>

【讨论】：

非常感谢。我先尝试了你的，但后来我选择了 Tylers（如另一条评论中所述）。但非常感谢您的努力。