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

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

感谢。

Answer 1

刷新页面后，您的jQuery片段不会被执行，因为它取决于“点击”操作。

Web浏览器会看到checked =“checked”，它会检查您的复选框。

您应该使用变量来帮助网络浏览器记住您的答案。

Answer 2

我会在您的网址中使用哈希来实现此功能。

请参阅此代码：

// set the state of your div as hash
window.location.hash = "#hide-div"; 

// now on document ready check the following
if(window.location.hash == '#hide-div') {
    // do something to hide your div and uncheck your checkbox
} 

if(window.location.hash == '#show-div') {
    // do something to show your div and ucheck your checkbox
}

还有文档：https://developer.mozilla.org/en/DOM/window.location

编辑：

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

    if(window.location.hash == '#show-div') {
        // do something to hide your div and uncheck your checkbox
        $("#foo").trigger('click');
    } 
});

Answer 3

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

<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
修改的代码

Javascript，当复选框未选中div时隐藏功能，请记住页面刷新

3 个答案: