勾选/未勾选时，复选框显示div。但是在浏览器中“返回”时隐藏了div

Question

我写了这个脚本，当勾选一个复选框时显示一个div：

<cfinput type="Checkbox" name="Agency" value="Agency" id="Agency">Agency Team<br>

<div id="agcyTeam" style="display:none">
    <p>Blah Blah Blah
</div>  

$(function () {
    $("#Agency").click(function () {
        if ($(this).is(":checked")) {
            $("#agcyTeam").show();
        } else {
            $("#agcyTeam").hide();
        }
    });
});

这是有效的，但是当我提交，然后在浏览器中按回复选框仍然被选中，但div被隐藏。如何在此实例中显示div？

Answer 1

首先，出于可访问性原因，您应该在复选框和无线电输入上使用change事件。其次，您可以使用toggle()将事件处理程序中的代码缩短为单行。

要解决您的问题，请在加载时引发change()事件以在其中调用处理程序逻辑：

$("#Agency").change(function () {
  $("#agcyTeam").toggle(this.checked);
}).trigger('change');