如何根據頁面加載中的復選框值隱藏 div？

Question

我的視圖中有以下復選框當頁面加載上未選中復選框時如何隱藏 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>

我嘗試了以下但不起作用，

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

在單擊事件上它工作得很好，但我想檢查頁面加載和隱藏/顯示invoiceDetails div 上的復選框的值。 如果未選中則隱藏invoiceDetails否則顯示invoiceDetails

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

Answer 1

簡單的：

 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>

注意：這只會在頁面加載時隱藏 div，如果你想點擊它會有所幫助：

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

注意2：如果你想把它反轉，只需刪除! 從如果

Answer 2

考慮使用 class 隱藏所有元素。 然后根據需要顯示它們。

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

我添加了一個屬性來幫助識別從復選框到 HTML 元素的關系。

當頁面最初加載時，所有項目都將被隱藏。 然后 JavaScript / jQuery 將加載，這將檢查每個復選框的狀態。 如果它們被選中，它將刪除 class，顯示隱藏元素。

如果用戶隨后對其中一個復選框進行了更改，則data-rel屬性有助於顯示正確的元素。