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

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

此外，如果在页面加载时选中了main复选框，则仅在未选中主chcekbox时显示子复选框（显然因为上述函数仅作用于.change（））。

你有什么建议我尝试一下？如果您需要进一步解释，请随时提出。

编辑：顺便说一句，所有这些都在$（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");
        }
}

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

1 个答案: