首先，您需要class在復選框上使用 ainputs而不是因為idid 在頁面中必須是唯一的，以避免出現問題。
此外，要選中所有復選框并使用一個復選框，addEventListener我們需要使用forEach循環來獲取所有元素并change為其分配事件。這包括您popup和nav身體的撥動開關。
此外，我code通過僅使用fadeIn()除 和之外的 JS 來簡化您的操作delay()。還使用DOMContentLoaded, 方法來確保所有腳本都準備好在 DOM 準備就緒時使用。
實時工作演示：（您需要在瀏覽器上進行測試，因為 Stack Snippets 沒有 localStorage）
window.addEventListener('DOMContentLoaded', (event) => {
//get all elements
let getChecks = document.querySelectorAll('.checkBox_Toggle')
let navCheckBox = document.querySelector('#chk_nav')
let underStandBtns = document.querySelector('#buttonPopupMode .button-primary')
let popUpEl = document.querySelector('#popupMode')
//onload change checked
$('#popupMode').delay(3000).fadeIn(500);
//check localStorage
if (localStorage.darkMode == "true") {
document.body.classList.toggle('dark');
//set all switches to true
getChecks.forEach(function(checkbox) {
checkbox.checked = true;
})
} else {
document.body.classList.toggle('light');
}
//Event Listener
getChecks.forEach(function(checkbox) {
checkbox.addEventListener('change', (e) => {
if (e.target.getAttribute('id') == 'chk_popUp' && e.target.checked) {
console.log('fdfd')
navCheckBox.checked = true;
} else if (e.target.getAttribute('id') == 'chk_nav' && e.target.checked) {
navCheckBox.checked = true;
} else {
navCheckBox.checked = false;
}
document.body.classList.toggle('dark');
document.body.classList.toggle('light');
localStorage.darkMode = (localStorage.darkMode == "true") ? "false" : "true";
});
})
//hide popup
underStandBtns.addEventListener('click', () => {
popUpEl.style.display = 'none';
})
});
#modeSwitcher {
margin: 5% 50%;
}
#modeSwitcher .checkbox {
opacity: 0;
position: absolute;
}
#modeSwitcher .checkbox:checked+.label .ball {
transform: translateX(35px);
}
#modeSwitcher .checkbox:checked+.label .ball::after {
content: '';
position: absolute;
background-color: #0A0E27;
width: 13px;
height: 13px;
border-radius: 50%;
bottom: 50%;
left: -5%;
transform: translateY(50%);
}
#modeSwitcher .label {
background-color: #0A0E27;
border-radius: 50px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: space-between;
padding: 5px;
margin: 0;
position: relative;
height: 16px;
width: 50px;
transform: scale(1.5);
}
#modeSwitcher .label .fa-moon {
color: #0A0E27;
}
#modeSwitcher .label .ball {
background-color: #FDC503;
border-radius: 50%;
position: absolute;
top: 3px;
left: 3px;
height: 20px;
width: 20px;
transform: translateX(0px);
transition: transform 0.2s linear;
}
#popupMode {
display: none;
width: 100%;
height: 100%;
background: rgba(22, 33, 92, 0.95);
position: fixed;
top: 0;
z-index: 25;
}
#popupMode .main-content {
display: flex;
align-items: center;
justify-content: center;
}
#popupMode .main-content #modeChoice {
padding: 80px;
background-color: #fff !important;
border-radius: 20px;
padding: 80px 85px 100px 85px;
}
@media screen and (max-width: 1600px) {
#popupMode .main-content #modeChoice {
padding: 56px 60px 70px 60px;
}
}
#popupMode .main-content #modeChoice .title {
text-align: center;
}
#popupMode .main-content #modeChoice .title h2 {
color: #000;
font-size: 40px;
}
@media screen and (max-width: 1600px) {
#popupMode .main-content #modeChoice .title h2 {
font-size: 28px;
}
}
#popupMode .main-content #modeChoice .title p {
color: #808080;
font-size: 15px;
margin-top: 20px;
}
@media screen and (max-width: 1600px) {
#popupMode .main-content #modeChoice .title p {
font-size: 13px;
margin-top: 15px;
}
}
#popupMode .main-content #modeChoice .choose-mode {
display: flex;
justify-content: center;
align-items: center;
margin: 60px 0 90px 0;
}
@media screen and (max-width: 1600px) {
#popupMode .main-content #modeChoice .choose-mode {
margin: 42px 0 63px 0;
}
}
#popupMode .main-content #modeChoice .choose-mode p {
color: #4b4b4b;
}
@media screen and (max-width: 1600px) {
#popupMode .main-content #modeChoice .choose-mode p {
font-size: 10px;
}
}
#popupMode .main-content #modeChoice .choose-mode p.right {
color: #c4c4c4;
font-size: 13px;
}
@media screen and (max-width: 1600px) {
#popupMode .main-content #modeChoice .choose-mode p.right {
font-size: 10px;
}
}
#popupMode .main-content #modeChoice #modeSwitcher label {
background-color: #FCFCFC;
border: 1px solid #D5D5D5;
}
#popupMode .main-content #modeChoice #modeSwitcher label .fa-moon {
color: #FCFCFC;
}
#popupMode .main-content #modeChoice #modeSwitcher label .ball {
box-shadow: 0px 3px 6px rgba(0, 0, 0, 0.2);
}
#popupMode .main-content #modeChoice #buttonPopupMode {
display: flex;
justify-content: center;
}
#popupMode .main-content #modeChoice #buttonPopupMode .button-primary {
width: unset;
}
@media screen and (max-width: 1600px) {
#popupMode .main-content #modeChoice #buttonPopupMode .button-primary {
padding: 13px 50px;
font-size: 12px;
}
}
body.dark {
background-color: black;
}
body.light {
background-color: whitesmoke;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="modeSwitcher">
<input type="checkbox" class="checkbox checkBox_Toggle" id="chk_nav" />
<label class="label" for="chk_nav">
<i class="fas fa-moon"></i>
<div class="ball"></div>
</label>
</div>
<!-- Popup Mode -->
<div id="popupMode">
<div class="container-fluid p-0 h-100">
<div class="row h-100">
<div class="col-12 main-content">
<div id="modeChoice">
<div class="title">
<h2>Welcome</h2>
<p>
You can switch the button from light mode<br>to dark mode
</p>
</div>
<div class="choose-mode">
<div id="modeSwitcher">
<input type="checkbox" class="checkbox checkBox_Toggle" id="chk_popUp" />
<label class="label" for="chk_popUp">
<i class="fas fa-moon"></i>
<div class="ball"></div>
</label>
</div>
</div>
<div id="buttonPopupMode">
<a href="#" class="btn button-primary">UNDERSTAND</a>
</div>
</div>
</div>
</div>
</div>
</div>
