He agregado un evento de clic a la clase sec que mostrará y ocultará la casilla de verificación.
Pero cuando hago clic en la casilla de verificación, la casilla de verificación se oculta.
let sec = document.querySelector('.sec'); let checkbox = document.querySelector('.switch'); sec.addEventListener('click', ()=>{ checkbox.classList.toggle("show"); }) .sec{ background:lightgray; padding:10px; width:450px; cursor:pointer; position:relative; margin-top:70px; } .switch{ display:none; background:gray; padding:5px; position:absolute; bottom : 100% } .switch::after { content: ''; position: absolute; top: 100%; left: calc(50% - 10px); background: #88b7d5; background: #242334; border: 1px solid #3F3E5B; width: 10px; height: 10px; -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%); clip-path: polygon(0 0, 100% 0, 50% 100%); } .show{ display:block; } <section class="sec"> <p>Click me to show popup</p> <div class="popup"> <label class="switch"> I am checkbox <input type="checkbox"> </label> </div> </section>El clic en la casilla de verificación también es un clic en la sección porque la casilla de verificación está dentro de la sección, por lo que el detector de eventos alterna la casilla de verificación.
Agregue un detector de eventos en la etiqueta de la casilla de verificación que use event.stopPropagation() para evitar que el evento se propague al contenedor.
let sec = document.querySelector('.sec'); let label = document.querySelector('.switch'); sec.addEventListener('click', () => { label.classList.toggle("show"); }) label.addEventListener('click', (event) => { event.stopPropagation() }) .sec { background: lightgray; padding: 10px; width: 450px; cursor: pointer; position: relative; margin-top: 70px; } .switch { display: none; background: gray; padding: 5px; position: absolute; bottom: 100% } .switch::after { content: ''; position: absolute; top: 100%; left: calc(50% - 10px); background: #88b7d5; background: #242334; border: 1px solid #3F3E5B; width: 10px; height: 10px; -webkit-clip-path: polygon(0 0, 100% 0, 50% 100%); clip-path: polygon(0 0, 100% 0, 50% 100%); } .show { display: block; } <section class="sec"> <p>Click me to show popup</p> <div class="popup"> <label class="switch"> I am checkbox <input type="checkbox"> </label> </div> </section>