试图隐藏/取消隐藏一个DIV时未调用javascript函数

我在自己的.js文件中有以下javascript代码,它试图隐藏/取消隐藏带有类“mailing address controls”的DIV,这取决于是否选中了“mailing address checkbox”。如果复选框值发生更改,我希望在页面加载时发生此情况:

$(document).ready(() => {

    function mailingAddressCheckbox() {
        if ($(this).is(":checked"))
            $(".mailing-address-controls").addClass("hidden");
        else
            $(".mailing-address-controls").removeClass("hidden");
    }

    $(".mailing-address-checkbox").load(mailingAddressCheckbox);
    $(".mailing-address-checkbox").change(mailingAddressCheckbox);
});

我有以下razor.cshtml代码定义了“邮寄地址复选框”和“邮寄地址控件”:

<label class="control">
    @Html.CheckBoxFor(model => model.IsMailingSameAsPhysical, new { @class = "mailing-address-checkbox" })
    @Html.LabelFor(model => model.IsMailingSameAsPhysical)
</label>
<div class="mailing-address-controls df fww cols hidden">
    ......
</div>

但是, mailingAddressCheckbox 函数似乎从未被调用,当我选中/取消选中该复选框时,不会发生任何事情。我做错什么了?