16

私は現在使用しています

 $("#some-box").click(function(){
     $("#main-box").toggle();
  });

チェックボックスがチェックボックスのステータスを保存するページの一部である場合を除いて、これはうまく機能します。チェックボックスがチェックされた状態で保存されている場合、メインボックス (チェックボックスをクリックすると表示される) はリロード時に非表示になり、チェックボックスがクリックされた場合にのみ表示されます。これは現在、「チェックされていない」チェックボックスを意味します (トグル)。

チェックボックスがすでにオンになっている場合、ページの読み込みを確認するにはどうすればよいですか? その場合、トグルを自動的にトリガーしますか?

4

5 に答える 5

29

これはうまくいくはずです：

if ($("#some-box").is(':checked')){
    $("#main-box").show();
}
于 2013-05-08T23:47:41.200 に答える
6

.toggle()状態を受け入れます-したがって、特定の呼び出しで要素を表示または非表示にするかどうかを渡すことができます:

$("#some-box").change(function(){
     $("#main-box").toggle($(this).is(':checked'));
  });

$('#some-box').trigger('change');

PS：ご覧のとおり、change代わりにイベントを使用することを提案していますclick

オンライン デモ: http://jsfiddle.net/R4Bjw/

于 2013-05-08T23:46:52.507 に答える
5

.attr("checked")またはで初期状態を取得できます.prop("defaultChecked")。ただし、次の方法がより良い方法だと思います。

function update() {
    $("#main-box")[this.checked ? "hide" : "show"]();
    // as by @zerkms, this is a different way for writing it:
    // $("#main-box").toggle(this.checked);
}
update.call($("#some-box").click(update)[0]);

ほとんどのイベントでは、初期化のために 1 回だけトリガーするのは簡単ですが、ここでは当てはまりません。自動的にオンロードするチェックボックスをクリック (および変更) したくありません。

于 2013-05-08T23:46:47.437 に答える
1 
(function($) {
    var $somebox = $('#some-box'),
        $mainbox = $('#main-box');

    var toggleMain = function() {
        $mainbox.slideToggle();
    };

    if($somebox.is(':checked')) {
        toggleMain();
    }

    $somebox.on('click', toggleMain);
})(window.jQuery);

ここにフィドルがあります：http://jsfiddle.net/FX7Du/4/

于 2013-05-08T23:48:21.797 に答える
1

is(':checked')チェックボックスがチェックされている場合にボックスをテストして表示するために使用します。

if ($('#some-box').is(':checked')) {
    $('#main-box').show();
}

次に、クリック ハンドラーをそのまま使用します。

于 2013-05-08T23:46:27.610 に答える