javascript - 复选框在勾选/未勾选时显示 div。但是在浏览器中 'back'时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');