Javascript 如何根据页面加载中的复选框值隐藏div？

我的视图中有以下复选框，当页面加载时未选中复选框时，如何隐藏div

<input type="checkbox" class="k-checkbox" id="chkInvoiceStatusActive" asp-for="InvoiceStatus" value="true" />
<input type="hidden" class="k-checkbox" id="chkInvoiceStatusActive" asp-for="InvoiceStatus" value="false" />
<label>Invoice Status</label>

单击事件时，其工作正常，但我想检查页面加载和隐藏/显示

invoiceDetails

div上复选框的值。如果未选中，则隐藏

invoiceDetails

，否则显示

invoiceDetails

 $('#chkInvoiceStatusActive').click(function () {
        if ($(this).is(':checked')) {
            $("#invoiceDetails").show();
        } else {
            $("#invoiceDetails").hide();
        }

简单：

const checkbox=document.querySelector（“checkbox”）//获取复选框
const div=document.querySelector（“#div”）//跳伞
如果（！checkbox.checked）{//if未选中复选框
div.style.display=“无”//隐藏div
};

复选框
该部分中有一些有趣的文本。
请考虑在前面用一个类隐藏所有元素。然后根据需要展示它们


$（函数（）{
$（“输入[type='checkbox']”）。每个（函数（i，el）{
var chk=$（el）；
如果（chk.is（“：checked”））{
$（“#”+chk.data（“rel”）.removeClass（“隐藏”）；
}
});
$（“输入[type='checkbox']”）。更改（函数（e）{
如果（$（this）.is（“：checked”））{
$（“#”+$（this.data（“rel”））.removeClass（“hidden”）；
}否则{
$（“#”+$（this.data（“rel”））.addClass（“hidden”）；
}
});
});
.invoice.status{
填充：0.5em；
}
.隐藏{
显示：无；
}

发票状态
发票状态：良好
HTML ID必须是唯一的！对于初始加载，我建议使用CSS。加载后，您可以将回调绑定到事件，如
单击
或
更改
。现在我进一步回顾一下，不清楚为什么要隐藏其中一个。我将删除第二个元素，或者更改
值
，或者使用它已经是二进制状态<代码>如果（$（this）.is（':checked'））
它将被选中
true
或不被选中
false
$（“#发票详细信息”）。切换（$（''chkInvoiceStatusActive'）。is（':checked'））
就足够了。这对我有帮助，谢谢。
 $('#chkInvoiceStatusActive').click(function () {
        if ($(this).is(':checked')) {
            $("#invoiceDetails").show();
        } else {
            $("#invoiceDetails").hide();
        }