Wenn Statement Checkbox Modal

Question

-Code unten

<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css" /> 
 

 
<div class="w3-col" id="login" style="width:300px"> 
 
    Subscribe to receive more interesting science experiments 
 
    <p></p> 
 
    Email 
 
    <input type="email" name="email" id="email"> 
 
    <p>I agree to the Terms and Conditions 
 
    <input type="checkbox" /> 
 
    <button onclick="document.getElementById('id01').style.display='block'" class="w3-grey">Sign Up</button> 
 

 
    <div id="id01" class="w3-modal"> 
 
    <div class="w3-modal-content"> 
 
     <div class="w3-container"> 
 
     <span onclick="document.getElementById('id01').style.display='none'" class="w3-closebtn">&times;</span> 
 
     <p>Thank you for signing up!</p> 
 
     <p>We will deliver the monthly experiment on the 1st of every Month</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

So versuche ich eine IF Anweisung an die Checkbox hinzufügen, so dass, wenn sie nicht abgehakt, kommt der modal mit einem Fehler einpacken statt Bestätigung

Vielen Dank im Voraus

Answer 1

die Logik ist, dass, wenn der Benutzer klickt o n die Schaltfläche Sign Up müssen Sie überprüfen, ob das Kontrollkästchen (ich wurde als #agree markiert) checked ist. Wenn ja, zeige das Modal an. Lesen Sie den Code und lassen Sie mich wissen, wenn etwas nicht klar ist.

function subscribe() { 
 
    var cb = document.getElementById('agree'); 
 
    if (cb.checked) { 
 
     document.getElementById('id01').style.display='block'; 
 
    } 
 
    else { 
 
    alert('please agree to the terms'); 
 
    } 
 
}

<link rel="stylesheet" href="http://www.w3schools.com/lib/w3.css" /> 
 

 
<div class="w3-col" id="login" style="width:300px"> 
 
    Subscribe to receive more interesting science experiments 
 
    <p></p> 
 
    Email 
 
    <input type="email" name="email" id="email"> 
 
    <p>I agree to the Terms and Conditions 
 
    <input type="checkbox" id="agree" /> 
 
    <button onclick="subscribe()" class="w3-grey">Sign Up</button> 
 

 
    <div id="id01" class="w3-modal"> 
 
    <div class="w3-modal-content"> 
 
     <div class="w3-container"> 
 
     <span onclick="document.getElementById('id01').style.display='none'" class="w3-closebtn">&times;</span> 
 
     <p>Thank you for signing up!</p> 
 
     <p>We will deliver the monthly experiment on the 1st of every Month</p> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>