javascript keep checkbox checked after refresh page

Question

hi i am javascript newbie.

I have checkbox that slideDown other input , i want to keep that checkbox checked and the other input showed after refreshing the page if the input checkbox checked

javascript:

function validateSitec(){
if (document.getElementById('sitecheck').checked){
$('#sitecheck').prop('checked', true);
$('#closedmsg').slideDown();
}else{
$('#closedmsg').slideUp();
$("#sitecheck").removeProp("checked").checkboxradio("refresh");
}
}

this my inputs:

<label for="sitecheck">
<span style="font-weight:bold;">close site+ msg:</span>
</label>
<input name="" type="checkbox" id="sitecheck" onclick="validateSitec()" /><span style="font-weight:bold;">click to activate msg</span><br>
<input type="text" name="closedmsg" id="closedmsg" style="width:440px;height:120px;display:none;" value="enter closed msg.."/>

i want if checked stay checked.. and wont change after refreshing the page , then when unchecked so back to normal and be unchecked when refreshing the page..

should i use php for making it not change after checking with javascript?

Edited:

Thanks to all for helping credit goes to : leiyonglin .

The working code for anyone who like to use it:

download first: https://github.com/carhartl/jquery-cookie

then use this codes working awesome :

JavaScript:

<script type="text/javascript">

function validateSitec(){
if (document.getElementById('sitecheck').checked){
    $('#sitecheck').prop('checked', true);
    $('#closedmsg').slideDown();
    $.cookie("cookieChecked", "#sitecheck");
}else{
    $('#closedmsg').slideUp();
    $("#sitecheck").removeProp("checked");
    $.cookie("cookieChecked","");
}
}


  $(function(){
      var cookieChecked = $.cookie("cookieChecked");
      if(cookieChecked){
          $('#sitecheck').prop('checked', true);
          $('#closedmsg').show();
      }else{
          $("#sitecheck").removeProp("checked");
          $('#closedmsg').hide();
      }
 })
    </script>

html inputs:

<label for="sitecheck">
<span style="font-weight:bold;">close site temp:</span>
</label>
<input name="" type="checkbox" id="sitecheck" onclick="validateSitec()" /><span style="font-weight:bold;">close site and add message</span><br>
<input type="text" name="closedmsg" id="closedmsg" style="width:440px;height:120px;display:none;" value="<?php echo $data['csitemsg']; ?>" />

This working perfect thx again all.

you could use cookies to store which checkbox was selected

Spokey
– Spokey

2013-08-15 06:18:26 +00:00
Commented Aug 15, 2013 at 6:18 — Spokey
– Spokey, Commented Aug 15, 2013 at 6:18

Sithu · Accepted Answer · 2013-08-15 06:34:13Z

1

You can use cookie to maintain your data on page refresh by using cookie. I notice you are using JQuery in your code. Here is a JQuery-Cookie plugin which will let you use cookie to manage your data across page refresh.

https://github.com/carhartl/jquery-cookie

Go to Usage section and you will find how to create, read, delete and set expire easily form the plugin.

answered Aug 15, 2013 at 6:34

Sithu

4,4691 gold badge24 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

leiyonglin · Accepted Answer · 2013-08-15 07:02:30Z

0

Set cookies: Save the checked element in cookieChecked

function validateSitec(){
if (document.getElementById('sitecheck').checked){
    $('#sitecheck').prop('checked', true);
    $('#closedmsg').slideDown();
    $.cookie("cookieChecked", "#sitecheck");
}else if(document.getElementById('closedmsg').checked){
    $('#closedmsg').slideUp();
    $("#sitecheck").removeProp("checked").checkboxradio("refresh");
    $.cookie("cookieChecked", "#closedmsg");
} else {
    $.cookie("cookieChecked","");
}
}

When page onload

 $(function(){
      var cookieChecked = $.cookie("cookieChecked");
      if(cookieChecked){
          $(cookieChecked).trigger("click");
      }
 })

I use the jquery cookie plugin : https://github.com/carhartl/jquery-cookie

edited Aug 15, 2013 at 7:02

answered Aug 15, 2013 at 6:35

leiyonglin

6,89412 gold badges38 silver badges42 bronze badges

3 Comments

user2635001 Over a year ago

working exept when i uncheck its keep bieng checked and idea?

leiyonglin Over a year ago

reset cookie value when nothing checked

user2635001 Over a year ago

ok awesome i fixed the code any edit my question so anyone can use it thanks you!

Amith · Accepted Answer · 2013-08-15 06:22:49Z

0

Identify the page refresh event and store the status of check box in cache or local storage. After refresh completes based on the checked status perform your logic

answered Aug 15, 2013 at 6:22

Amith

1,4321 gold badge10 silver badges22 bronze badges

Comments

bayuah · Accepted Answer · 2013-08-15 06:49:46Z

Try this, not use additional plugin:

<script>
    function validateSitec(){
        if (document.getElementById('sitecheck').checked){
            $('#sitecheck').prop('checked', true);
            $('#closedmsg').slideDown();
            document.cookie="sitecheck=site_checked";
        }else{
            $('#closedmsg').slideUp();
            $("#sitecheck").removeProp("checked").checkboxradio("refresh");
            document.cookie="sitecheck=site_unchecked";
        }
    }
</script>

When document ready:

<script>
 $(function(){
      var kuki=read_cookie("sitecheck");
      if(kuki=="site_checked"){
            $('#sitecheck').prop('checked', true);
            $('#closedmsg').slideDown();
      }else{
            $('#closedmsg').slideUp();
            $("#sitecheck").removeProp("checked").checkboxradio("refresh");
      }
 });
</script>

Read cookies

<script>
function read_cookie(name) {
    var name = name + "=";
    var kukiAri = document.cookie.split(';');
    for(var i=0;i < kukiAri.length;i++) { 
        var kuki = kukiAri[i];
        while (kuki.charAt(0)==' ') kuki = kuki.substring(1,kuki.length);
        if (kuki.indexOf(name) == 0)
                return kuki.substring(name.length,kuki.length);
    }
    return null;
};
</script>

Collectives™ on Stack Overflow

javascript keep checkbox checked after refresh page

4 Answers 4

Comments

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related