在頁面加載時，如果選中復選框，則顯示字段

Question

所以我有下面的代碼顯示/隱藏字段，具體取決於是否選中了復選框，但我似乎無法弄清楚何時刷新頁面和我保存的表單上的示例數據，已選中復選標記，為什么我的字段未在頁面加載時顯示。

On page load (With saved data):  
- First checkbox checked (Shows nothing)  
- Uncheck then check, then it finally shows  

選中復選框后，如何在頁面加載時顯示字段？ 我試過調用 DOMContentLoaded 但我做對了嗎？

代碼：

const formWrapperPersonal = document.getElementById('form-wrapper-personal');

var rtk11 = document.getElementById('rtk1');
function rtk1() {
    rtk11.addEventListener('change', (e) => {
        if (e.target.checked) {
            formWrapperPersonal.style.display = ''
        } else {
            formWrapperPersonal.style.display = 'none'
        }
    })
}
rtk11.addEventListener('change', rtk1);
document.addEventListener('DOMContentLoaded', rtk1);
rtk1();

Answer 1

您只需要刪除內部事件偵聽器，因為元素和文檔上已經有了一個。

const formWrapperPersonal = document.getElementById('form-wrapper-personal');

var rtk11 = document.getElementById('rtk1');
function rtk1() {
    if (rtk11.checked) {
        formWrapperPersonal.style.display = ''
    } else {
        formWrapperPersonal.style.display = 'none'
    }
}

rtk11.addEventListener('change', rtk1);
document.addEventListener('DOMContentLoaded', rtk1);
rtk1();