Javascript，隐藏复选框未选中的 div 时的函数，请记住页面刷新

Question

我仍然遇到这个问题，但我不知道如何解决它。感谢给出的答案，我对它的外观有所了解，但我不知道如何使其工作。

<小时/>

我的 javascript 复选框代码有问题。

我有一个隐藏 div 的函数(我的其他帖子: javascript, When right div is hidden left div has to be 100% width )

但是当我刷新页面时，复选框将再次被选中，我读了一些有关 cookie 的内容，但我不知道如何实现它。

我的 JavaScript 代码:

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

        });
    });
});

我的复选框的 html 代码:

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

我的 Div:

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

谢谢。

Answer 1

如果您不希望默认选中该复选框，请使用

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

而不是

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

如果您想在页面首次加载时检查复选框的状态，请添加这段 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();
    }
});

如果您希望用户的浏览器在用户每次访问您的网站时记住“foo”复选框的状态，您可能需要阅读有关 cookie 的内容。 Here's a guide for JS Cookies at w3schools

<小时/>

编辑

我不会声称这有效，因为我没有尝试过，我自己也没有使用过 cookie(但我确实重新发现 Google 基本上拥有所有问题的答案。当你给出事半功倍)

$(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 '' ;
}

代码修改自The Site Wizard