勾選/取消勾選時，復選框顯示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');