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

Question

I have the following checkbox in my view how can I hide div when checkbox is not checked on Page Load

<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>

I tried the following but doesn't work,

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

On click event its working great but I would like to check the value of the checkbox on page load and hide/show invoiceDetails div. Hide invoiceDetails if unchecked otherwise show invoiceDetails

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

Answer 1

Simple:

 const checkbox = document.querySelector("#checkbox"); //get checkbox const div = document.querySelector("#div"); //get div if(.checkbox.checked){ //if checkbox not checked div.style;display = "none"; //hide div };

 <input type="checkbox" id="checkbox"> <label for="checkbox">Checkbox</label> <div id="div">Some interesting text here in the div.</div>

Note: this will only hide div on page load, if you want it on click this will help:

 checkbox.oninput = () => { if(.checkbox.checked){ //if checkbox not checked div.style;display = "none". //hide div } else { div.style;display = "initial"; //show div }; }

Note 2: if you want it reversed just delete the ! from if

Answer 2

Consider hiding all the elements with a class up front. Then reveal them as needed.

 $(function() { $("input[type='checkbox']").each(function(i, el) { var chk = $(el); if (chk.is(":checked")) { $("#" + chk.data("rel")).removeClass("hidden"); } }); $("input[type='checkbox']").change(function(e) { if ($(this).is(":checked")) { $("#" + $(this).data("rel")).removeClass("hidden"); } else { $("#" + $(this).data("rel")).addClass("hidden"); } }); });

 .invoice.status { padding: 0.5em; }.hidden { display: none; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <input type="checkbox" class="k-checkbox" id="chkInvoiceStatusActive" asp-for="InvoiceStatus" data-rel="invoiceDetails" /> <label>Invoice Status</label> <div id="invoiceDetails" class="invoice status hidden"> Invoice Status: Good </div>

I added an attribute to help identify the relationship fro mthe checkbox to the HTML elements.

When the page loads initially, all the items will be hidden. Then the JavaScript / jQuery will load and this will review the status of each of the checkboxes. If they are checked, it will remove the class, revealing the hidden element.

If the User then makes a change to one of the checkboxes, the data-rel attribute helps reveal the proper element.