Question

我想这样做： - 当我点击复选框"div=true"或"div=flase"时，系统会显示或隐藏该复选框 - 要保存的checkbox的状态，即使是最后一个被保存的方法

也是如此

问题 - 在页面刷新时保存checkbox的状态，但不保存调用的最后一个方法。

我不明白我的错误在哪里。

以下是代码：

<input type='checkbox' id='LineOp' />  Show/Hide Weekends
<div id="true">
    <p>Hide weekend</p>
</div>
<div id="false">
    <p>Show weekend</p>
</div>



function SaveLastCheck() {
    var getStstus = localStorage.getItem("LineOp");

    if (getStstus === "true")
        $("#LineOp").prop("checked", true);

    $("#LineOp").click(function(){
        localStorage.setItem('LineOp', $(this).prop("checked"));
    });

}

$(document).ready(function() {
    SaveLastCheck();
});

$(document).ready(function show_weekends () {
    var checkbox = $('#LineOp'); 
    var dependent = $('#true');
    if (checkbox.attr('checked') !== undefined){
      dependent.show();

    } else {
        dependent.hide();

    }

    checkbox.change(function(e){
       dependent.toggle(); 
    });
});


$(document).ready(function hide_weekends () {
    var checkbox = $('#LineOp'); 
    var dependent = $('#false');
    if (checkbox.attr('checked') == undefined){
      dependent.show();

    } else {
        dependent.hide();

    }

    checkbox.change(function(e){
       dependent.toggle(); 
    });
});

这是我的例子http://jsfiddle.net/b3g6arbd/4/

Answer 1

如果您使用jQuery的is()来检查初始状态，那么它将起作用，您可以通过将复选框状态传递给toggle来缩短代码。然后，您不需要复制代码。

E.g：

$(document).ready(function() {
    SaveLastCheck();

    var checkbox = $('#LineOp'); 
    $('#true').toggle(checkbox.is(':checked'));
    $('#false').toggle(!checkbox.is(':checked'));
    checkbox .change(function () {
        $('#true').toggle(this.checked);
        $('#false').toggle(!this.checked);
    });
});

以下是更新后的示例：http://jsfiddle.net/b3g6arbd/12/

有关选中复选框状态的更多示例，请参阅this question and the answers。

页面刷新时未保存的更改，使用JavaScript

1 个答案: