jquery - ページの更新時にjquery関数を実行するにはどうすればよいですか？

Question

チェックボックスがあります。チェックすると段落が表示されます。チェックを外すと非表示になります。問題ありません。問題は、チェックボックスをオンにした場合、F5（更新）ボタンを押すと、チェックボックスはオンのままですが、段落が非表示になります。ページを更新するときに段落を表示させたい。

HTMLは次のとおりです。

<input type="checkbox" id="something">
<p id="info" style="display:none">Yes ,checkbox is checked now...</p>

これがJqueryです：

$(document).ready(function() {

    $("#something").change( function(){
        if( $(this).is(':checked') ) {
            $("#info").show();
        } else {
            $("#info").hide();
        }
    });
});

Answer 1

ロード時にチェックボックスの状態をチェックする必要があります：

$(document).ready(function() {
    function f() {
       if( $('#something').is(':checked') ) {
            $("#info").show();
        } else {
            $("#info").hide();
        }
    }
    $("#something").change(f);
    f();
});

Answer 2

イベントをトリガーするだけです

$(document).ready(function() {

    // this only runs upon the event
    $("#something").change( function(){
        if( $(this).is(':checked') ) {
            $("#info").show();
        } else {
            $("#info").hide();
        }
    });

    // trigger the event
    $("#something").trigger("change");
});

Answer 3

現在の動作は、変更用のイベントハンドラーがあるためです。したがって、F5を実行して更新すると、チェックされていても変更はありません。

この関数はdocument.readyで明示的に呼び出すことができます

function SetParagraphStatus() {
    if ($(this).is(':checked')) {
        $("#info").show();
    } else {
        $("#info").hide();
    }
}

$(document).ready(function () {

    $("#something").change(SetParagraphStatus);
    // call it anyway for load.
    SetParagraphStatus();
});

Answer 4

変更イベントをトリガーするだけです。

$(document).ready(function() {
    $("#something").change(function(){
        $("#info").toggle(this.checked);
    }).change()
})

Answer 5

$(window).bind("beforeunload", function(){

    $("#something >#info").show();

});