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

时间：2015-10-21 20:12:45

标签： jquery html cookies show show-hide

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

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

2 个答案:

答案 0 :(得分：2)

我会解决这个问题，Cookie会在24小时后过期。 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>

答案 1 :(得分：2)

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

我希望这有帮助！

相关问题
最新问题