Question

I still have the problem and i don’t know how to fix it. thanks to the answers given i hava an idea of how it looks, but i don’t know how to make it working.

---

I have a problem with my javascript checkbox code.

I have a function to hide a div (my other post: javascript, When right div is hidden left div has to be 100% width)

But when i refresh the page the checkbox will be checked again, i read something about cookies but i don’t know how to implement this.

My javascript code:

$(function() {
    $("#foo").on("click",function() {
        if ($(this).is(':checked')) $('#checked-a').show('fast',function() {
            $('#checked-b').css("width","60%");
            $('#checked-a').css("width","38%");
        }) ;
        else $('#checked-a').show('fast',function(){
           $('#checked-b').css("width","100%").show();         
           $('#checked-a').css("width","0%").hide();

        });
    });
});

My html code for the checkbox:

<input type="checkbox" checked="checked" name="foo" id="foo" />

My Div’s:

    <div class="content1" id="checked-b">
    <%= button_to "Zoek", search_index_path, :method => :get, :class => 'contentlinks' %>
    <%= button_to "Print", root_url, :class => 'contentlinks' %>
    <%= button_to "Edit", root_url, :class => 'contentlinks' %>
    <%= button_to "Add", root_url, :class => 'contentlinks' %>
<br>    

<div class="spacing">
    <%= yield %>
</div>

</div>


<div class="content2" id="checked-a">

Thanks.

Answer 1

if you don’t want the checkbox to be checked by default use

<input type="checkbox" name="foo" id="foo" />

instead of

<input type="checkbox" checked="checked" name="foo" id="foo" />

If you want to check the status of the checkbox when the page first loads, add this bit of JavaScript.

$(document).ready(function(){
    if ($("#foo").is(':checked')){
        $('#checked-b').css("width","60%");
        $('#checked-a').css("width","38%");
    } else {
        $('#checked-b').css("width","100%");
        $('#checked-a').css("width","0%").hide();
    }
});

If you want the user’s browser to remember if the status of the “foo” checkbox each time the user visits your site, you likely will need to read up on cookies. Here’s a guide for JS Cookies at w3schools

---

Edit

I’ll make no claims that this works because I haven’t tried it, nor have I ever used cookies myself (but I did re-discover that Google has the answers to basically everything. It’s really quite easy when you give it half an effort)

$(document).ready(function(){
    if (get_cookie( "fooIsChecked" ) == 1){
        $('#foo').prop("checked", true);
        $('#checked-b').css("width","60%");
        $('#checked-a').css("width","38%");
    } else {
        $('#foo').prop("checked", false);
        $('#checked-b').css("width","100%");
        $('#checked-a').css("width","0%").hide();
    }
    $("#foo").on("click",function() {
        if ($(this).is(':checked')){
            set_cookie( "fooIsChecked", "1", 30 );
            $('#checked-a').show('fast',function() {
                $('#checked-b').css("width","60%");
                $('#checked-a').css("width","38%");
            }) ;
        } else {
            set_cookie( "fooIsChecked", "0", 30 );
            $('#checked-a').show('fast',function(){
                $('#checked-b').css("width","100%").show();         
                $('#checked-a').css("width","0%").hide();
            });
        }
    });
});

function set_cookie ( cookie_name, cookie_value, lifespan_in_days, valid_domain ){
    var domain_string = valid_domain ? ("; domain=" + valid_domain) : '' ;
    document.cookie = cookie_name +
        "=" + encodeURIComponent( cookie_value ) +
        "; max-age=" + 60 * 60 * 24 * lifespan_in_days +
        "; path=/" + domain_string;
}

function get_cookie ( cookie_name ){
    var cookie_string = document.cookie;
    if (cookie_string.length != 0) {
        var cookie_value = cookie_string.match (
            '(^|;)[\s]*' + cookie_name + '=([^;]*)' );
        return decodeURIComponent ( cookie_value[2] ) ;
    }
    return '' ;
}

Code modified from The Site Wizard