Проверьте, установлен ли флажок УЖЕ проверен при загрузке с помощью jQuery

В настоящее время я использую

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

Что хорошо работает, за исключением случаев, когда флажок является частью страницы, которая сохраняет статус флажков. Если флажок сохранен как отмеченный галочкой, основной ящик (который открывается при щелчке по галочке) скрывается при перезагрузке и отображается только при щелчке по флажку, который теперь будет означать "немаркированный" флажок (как и ожидалось с помощью переключатель).

Как проверить загрузку страницы, если флажок уже отмечен, и в этом случае для автоматического запуска переключения?

Ответы

Ответ 1

это должно работать:

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

Ответ 2

Вы можете получить начальное состояние с помощью .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]);

Для большинства событий легко просто запустить его один раз для инициализации, но это не применимо здесь - мы не хотим автоматически переключаться (и изменять) флажок.

Ответ 3

.toggle() принимает состояние - поэтому вы можете передать, показывать или скрывать элемент на конкретном вызове:

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

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

PS: как вы можете видеть, я предлагаю использовать change событие вместо click

Демо-версия онлайн: http://jsfiddle.net/R4Bjw/

Ответ 4

Используйте is(':checked') для проверки и отображения окна, если флажок установлен:

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

И затем используйте обработчик кликов как есть.

Ответ 5

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