l108/infromatica.html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> input{ display: inline-block; font-family: sans-serif; } span{ font-family: sans-serif; } input[type=checkbox]{ appearance: none; } label{ border: 1px solid black; width: 40px; height: 20px; border-radius: 20px; cursor: pointer; vertical-align: -7px; } label::after{ content: ""; width: 18px; height: 18px; border-radius: 18px; margin: 1px 0px 0px 1px; background-color: black; position: absolute; transition: 0.5s ease margin-left; } #checkleerling:checked + label[for=checkleerling]::after, #checkdocent:checked + label[for=checkdocent]::after{ margin-left: 21px; } label{ display: inline-block; } .checkboxcontainer{ display: block; padding: 4px; } .veld{ display: inline-block; padding: 5px; width: 120px; text-align: end; } </style> </head> <body> <form> <span class="veld">Voornaam:</span><input><br> <span class="veld">Tussenvoegsel:</span><input><br> <span class="veld">Achternaam:</span><input><br> <span class="veld">Woonplaats:</span><input><br> <div class="checkboxcontainer"> <span class="veld" style="padding: 0px;">Leerling:</span><input type="checkbox" id="checkleerling"><label for="checkleerling"></label><br> </div> <div class="checkboxcontainer"> <span class="veld" style="padding: 0px;">Docent:</span><input type="checkbox" id="checkdocent"><label for="checkdocent"></label><br> </div> <span id="school" style="display: none;"> <span class="veld">School:</span><input><br> </span> <span id="leerling" style="display: none;"> <span class="veld">Klas:</span><input><br> <span class="veld">Niveau:</span> <select> <option value="vmbo">VMBO</option> <option value="vmbo">HAVO</option> <option value="vmbo">VWO</option> </select> <br> </span> <span id="docent" style="display: none;"> <span class="veld">Vak:</span><input><br> </span> </form> <script> document.getElementById("checkleerling").onchange = () => { if(document.getElementById("checkleerling").checked){ document.getElementById("checkdocent").checked = false document.getElementById("docent").style.display = "none" document.getElementById("leerling").style.display = "inline" document.getElementById("school").style.display = "inline" } else{ document.getElementById("leerling").style.display = "none" document.getElementById("school").style.display = "none" } } document.getElementById("checkdocent").onchange = () => { if(document.getElementById("checkdocent").checked){ document.getElementById("checkleerling").checked = false document.getElementById("leerling").style.display = "none" document.getElementById("docent").style.display = "inline" document.getElementById("school").style.display = "inline" } else{ document.getElementById("docent").style.display = "none" document.getElementById("school").style.display = "none" } } </script> </body> </html>

Resultaat

Made by Thijs Aarnoudse