Checkbox onchange div und checked ein anderes Kontrollkästchen

Question

Wie kann ich diesen Code ändern. Kann ich dort einen evenlistner verwenden, um dasselbe Ergebnis zu implementieren? Was ist in diesem Fall die beste Vorgehensweise? Kann ich hier Datenattribut oder QuerySelector besser verwenden? codepen

 const myCheck = document.getElementById("check"); 
 
    const myCheck2 = document.getElementById("check2"); 
 
    const dib = document.getElementById("dib"); 
 
    function change() { 
 
    if (myCheck2.checked) { 
 
     myCheck.checked = false; 
 
     dib.style.display = "block"; 
 
    } 
 
    else{ 
 
     dib.style.display = "none"; 
 
     myCheck.checked = true; 
 
    } 
 
    } 
 
    function func2() { 
 
    if (this.checked) { 
 
     myCheck2.checked = false; 
 
     dib.style.display = "none"; 
 
    } 
 
    else { 
 
     dib.style.display = "block"; 
 
     myCheck2.checked = true; 
 
    } 
 
    } 
 

 
    myCheck2.addEventListener('click', change); 
 
    myCheck.addEventListener('click', func2);

 <input type="checkbox" id="check" > 
 
    <input type="checkbox" id="check2" checked="checked" > 
 
    <div id="dib">Text</div>

Answer 1

Zwei Verbesserungen, die Sie überhaupt die Logik, um Ihren bestehenden Code machen könnten, wären ohne Änderung seiner aussagekräftigen Namen für Ihre Funktionen zu verwenden, und das Einrücken zu beheben. Aber trotzdem ...

Wenn ich Ihren vorhandenen Code verstanden habe, ist die Idee, wenn das Kontrollkästchen aktiviert ist, sollte das andere automatisch deaktiviert werden (in diesem Fall warum nicht Radio-Buttons verwenden?), Und das zugehörige div sollte Wird nur angezeigt, wenn das zweite Kontrollkästchen aktiviert ist? Wenn ja, könnten Sie den Code in eine einzige Funktion kombinieren wie folgt:

const myCheck = document.getElementById("check"); 
 
const myCheck2 = document.getElementById("check2"); 
 
const dib = document.getElementById("dib"); 
 

 
function cbChanged() { 
 
    (this === myCheck ? myCheck2 : myCheck).checked = !this.checked; 
 
    
 
    dib.style.display = myCheck2.checked ? "block" : "none"; 
 
} 
 

 
myCheck2.addEventListener('click', cbChanged); 
 
myCheck.addEventListener('click', cbChanged);

<input type="checkbox" id="check" > 
 
<input type="checkbox" id="check2" checked="checked"> 
 
<div id="dib">Text</div>

Beachten Sie, dass die oben noch zwei Ereignis-Listener bindet, sondern an die gleiche Funktion.

Im Folgenden finden Sie eine allgemeinere Version, die einen Container um die Kontrollkästchen und das zugehörige div verwendet, sodass mehrere Kopien davon auf der Seite alle von einem Ereignis-Listener mit einer ähnlichen Menge JS wie zuvor verarbeitet werden können Version:

function cbChanged(e) { 
 
    const showCB = this.querySelector(".show"); 
 
    const hideCB = this.querySelector(".hide"); 
 

 
    (e.target === hideCB ? showCB : hideCB).checked = !e.target.checked; 
 
    
 
    this.querySelector("div").style.display = showCB.checked ? "block" : "none"; 
 
} 
 

 
const containers = document.querySelectorAll(".container"); 
 
Array.prototype.forEach.call(containers, function(el) { 
 
    el.addEventListener('click', cbChanged); 
 
});

<div class="container"> 
 
    <input type="checkbox" class="hide" > 
 
    <input type="checkbox" class="show" checked="checked"> 
 
    <div>Text One</div> 
 
</div> 
 

 
<div class="container"> 
 
    <input type="checkbox" class="hide" > 
 
    <input type="checkbox" class="show" checked="checked"> 
 
    <div>Text Two</div> 
 
</div> 
 

 
<div class="container"> 
 
    <input type="checkbox" class="hide" > 
 
    <input type="checkbox" class="show" checked="checked"> 
 
    <div>Text Three</div> 
 
</div>