个人中心
gpt4 book ai didi

jquery - 通过复选框cookie显示和隐藏div

转载 作者：行者123 更新时间：2023-12-01 03:10:02 26 4
gpt4 key购买 nike

如何更改 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>

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

最佳答案

存储 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 block (单击复选框时执行的代码):

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>

我希望这有帮助!

关于jquery - 通过复选框cookie显示和隐藏div，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/33268378/

26 4 0
文章推荐： jquery - 防伪 token 作为 header 字段或作为 AJAX 上的 Post 值？
文章推荐： python - 在迭代 csv 文件的行时，动态地将计算列添加到 pandas 数据框？
文章推荐： visual-studio-code - VS 代码片段替换(转换)适用于变量而不是占位符
文章推荐： python - 如何将日期格式(星期几、月、日、年)更改为 pandas 可读格式？
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com