JQuery шоу на основе значения флажка при загрузке страницы

Question

У меня есть веб-приложение ASP MVC, и на одной из страниц есть набор основных флажков с вложенными флажками под ними. Под-флажки должны появляться только тогда, когда установлен соответствующий основной флажок. У меня есть следующий код, который прекрасно работает, если ни один из флажков не установлен при загрузке страницы.

$("input[id$=Suffix]").change(function() {

        prefix = this.id;

        if (!$(this).hasClass("checked")) {
            $("tr[id^=" + prefix + "]").show();
            $(this).addClass("checked");
        }
        else {
            $("tr[id^=" + prefix + "]").hide();
            $(this).removeClass("checked");
        }
    });

Теперь мне нужно проверить в базе данных значения основных флажков. Я получаю значения и могу установить флажки при загрузке страницы. Но когда появляется страница, под-флажки не отображаются, когда установлен основной флажок.

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

Что вы все предлагаете мне попробовать? Если вам нужны дальнейшие объяснения, не стесняйтесь спрашивать.

edit: btw, все это в $ (document) .ready ()

Answer 1

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

Вот пример того, что я имею в виду - вместо простого добавления события изменения также вызывайте update для каждогоодин, когда страница загружается.Этот код может быть не точным, у меня нет времени, чтобы проверить его прямо сейчас, но он должен дать общее представление.Я парень из MooTools, так что прости меня, если jQuery не совсем правильный.

$(document).ready(function(){

  $("input[id$=Suffix]").each(function(el){
    el.change(function(){ updateCheckbox(this); });
    updateCheckbox(el);
  });

});

function updateCheckbox(chk){
        prefix = chk.id;

        if (!$(chk).hasClass("checked")) {
            $("tr[id^=" + prefix + "]").show();
            $(chk).addClass("checked");
        }
        else {
            $("tr[id^=" + prefix + "]").hide();
            $(chk).removeClass("checked");
        }
}