l109/punt..html

<!DOCTYPE html> <html lang="en"> <head> <style> #checkbox:hover{ cursor: pointer; } input[type=checkbox]{ cursor: pointer; } .veld{ width:150px; display:inline-block; text-align: left; } </style> <script> window.onload = check1 window.onload = check2 function check1(){ if(document.getElementById('box1').checked && document.getElementById('box2').checked == true){ document.getElementById('box2').checked = false; } if(document.getElementById('box1').checked || document.getElementById('box1').checked == false){ document.getElementById('verdwijndiv2').style.display = "none" document.getElementById('optiediv2').style.display = "none" document.getElementById('namen2').value = ""; document.getElementById('opties2').value = ""; } else{ document.getElementById('verdwijndiv2').style.display = "block" document.getElementById('optiediv2').style.display = "block" } if(document.getElementById('box1').checked){ document.getElementById('verdwijndiv').style.display = "block" document.getElementById('optiediv').style.display = "block" } else{ document.getElementById('verdwijndiv').style.display = "none" document.getElementById('optiediv').style.display = "none" document.getElementById('namen').value = ""; document.getElementById('opties').value = ""; } } function check2(){ if(document.getElementById('box2').checked && document.getElementById('box1').checked == true){ document.getElementById('box1').checked = false; } if(document.getElementById('box2').checked || document.getElementById('box2').checked == false){ document.getElementById('verdwijndiv').style.display = "none" document.getElementById('optiediv').style.display = "none" document.getElementById('namen').value = ""; document.getElementById('opties').value = ""; } else{ document.getElementById('verdwijndiv').style.display = "block" document.getElementById('optiediv').style.display = "block" } if(document.getElementById('box2').checked){ document.getElementById('verdwijndiv2').style.display = "block" document.getElementById('optiediv2').style.display = "block" } else{ document.getElementById('verdwijndiv2').style.display = "none" document.getElementById('optiediv2').style.display = "none" document.getElementById('namen2').value = ""; document.getElementById('opties2').value = ""; } } </script> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> </head> <body> <form method="get"> <div><span class="veld">voornaam : </span><input type='text' id="naam"></div> <div><span class="veld">achternaam : </span><input type='text' id="plaats"></div> <div><span class="veld">leeftijd : </span> <select class="veld"> <option></option> <option>0-10 jaar</option> <option>10-20 jaar</option> <option>20-30 jaar</option> <option>30-40 jaar</option> <option>40-50 jaar</option> <option>50-60 jaar</option> <option>60 jaar en ouder</option> </select> </div> <div>Ga je op vakantie? </div> <div><span class="veld"></span><input type="checkbox" value="1" id="box1" onchange="check1()"><label for="box1" id="checkbox">Ja</label></div> <div><span class="veld"></span><input type="checkbox" value="1" id="box2" onchange="check2()"><label for="box2" id="checkbox">Nee</label></div> <div id="verdwijndiv"><span class="veld">Waarheen : </span><input type='text' id="namen"></div> <div id="optiediv"><span class="veld">Hoelang : </span> <select class="veld" id="opties"> <option></option> <option>1-2 dagen</option> <option>3-4 dagen</option> <option>5-6 dagen</option> <option>7-8 dagen</option> <option>9-10 dagen</option> <option>11-12 dagen</option> </select> </div> <div id="optiediv2"><span class="veld">wil je extra werken : </span> <select class="veld" id="opties2"> <option></option> <option>Ja</option> <option>Nee</option> </select> <div id="verdwijndiv2"><span class="veld">2e checkbox veld : </span><input type='text' id="namen2"></div> </div> </form> </body> </html>

Resultaat

Made by Thijs Aarnoudse