页面加载时基于复选框值的 jQuery 显示

Question

我有一个 ASP MVC Web 应用程序，其中一个页面上有一组主复选框，下面有子复选框。子复选框应仅在选中相应的主复选框时显示。只要页面加载时没有选中任何复选框，我的以下代码就可以正常工作。

$("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");
        }
    });

现在我需要检查数据库中主要复选框的值。我得到了这些值，并且可以选中页面加载时的复选框。但是当页面出现时，当主复选框被选中时，子复选框不显示。

另外，如果页面加载时主checkbox被选中，子checkbox只有在主chcekbox未选中时才会显示（显然是因为上面的函数只作用于.change()）。

你们都建议我尝试什么？如果您需要进一步的解释，请随时询问。

编辑：顺便说一句，所有这些都在 $(document).ready() 中

Answer 1

您的函数仅在更改时被调用，因此最初不会触发。您需要在页面加载时也运行的东西来检查任何选中的复选框并显示子项。

这是我的意思的一个示例 - 不仅添加更改事件，还可以在页面加载时为每个事件调用更新。这段代码可能不准确，我现在没有时间测试它，但它应该可以理解总体思路。我是 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");
        }
}