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