2

How do I change the jquery source, so my site remembers which box the user is checking for maybe 24 hours or something??

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

I know there are plenty of them out there, but I think that this one is the simplest and easiest. And I have already implemented it in my site.

Rohit Gupta
  • 4,022
  • 20
  • 31
  • 41
Peter
  • 287
  • 2
  • 5
  • 13
  • Welcome to Stack Overflow. I have adjusted your post for a few English issues. Please copy and paste the source here, rather than linking to it. You need to put that effort in, if you expect others to put the effort in to help you. – Rohit Gupta Oct 21 '15 at 21:47
  • hello, its not about i didn't want to paste it in, i felt like it was easier on the link. but here it goes. :) thanks for the edit – Peter Oct 21 '15 at 21:55
  • Peter, link only posts are discouraged and fall into low quality posts category and some get deleted. Now that you have made it a good quality question, I have up voted it. – Rohit Gupta Oct 21 '15 at 22:50
  • how can i bump my post so somemore can se it? – Peter Oct 24 '15 at 08:09
  • There are three ways. 1) Make the title more interesting. 2) Give a bounty, but you haven't got enough rep. 3) Hope someone with mega rep gives a bounty on it. I have added 2 more tags, that may help. – Rohit Gupta Oct 24 '15 at 22:45

2 Answers2

2

I would solve this Problem with Cookies set to expire in 24 hours. 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>
k4yaman
  • 475
  • 8
  • 20
  • 1
    thank you very much. i tried yours first but then i chose Tylers(as described in the other comment). but thank you very much for your efforts. – Peter Oct 25 '15 at 08:54
2

Storing the cookies is easy. First you need to determine the expiry date like so:

    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();

And now add this code to their respective if blocks (the ones that get executed when a checkbox is clicked):

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

For reading the cookies, a helper function might come in handy, I found the function below (made by Mac) here: https://stackoverflow.com/a/25490531/4645674

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

Then, at the beginning of the function ran when the document is ready, you can a check if the cookies exist. If they do, then check the checkboxes if they should be checked.

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
}

Next off, display the divs if their respective checkboxes are checked.

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

Now, all together, it should look a little bit like this:

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

I hoped this helped!

Community
  • 1
  • 1
Tyler W.
  • 38
  • 5
  • Hello this helped and was very nice. the good thing about this one is it checks/unchecks the boxes depending on how you set them to from last visit. i liked the idea. :) thanks – Peter Oct 25 '15 at 08:53
  • @Peter No problem! :) – Tyler W. Oct 25 '15 at 18:59