JSFiddle - React, Tailwind, and code Playground
HTML
<form id="abo" method="post">
<fieldset>
<legend>Jeg vil:</legend>
<label><input name="jegvil" required="" type="radio" checked="" value="bestille et abonnement">bestille et abonnement</label><br>
<label><input name="jegvil" required="" type="radio" value="kjøpe kun siste nummer">kjøpe kun siste nummer</label>
</fieldset>
<fieldset>
<legend>Informasjon om deg</legend>
<label for="a">Fornavn:</label><input name="fornavn" id="a" required="" type="text" placeholder="Ola"><br>
<label for="b">Etternavn:</label><input name="etternavn" id="b" required="" type="text" placeholder="Nordmann"><br>
<label for="c">E-postadresse:</label><input name="mail" id="c" required="" type="email" placeholder="[email protected]"><br>
<label for="d">Telefonnummer:</label><input name="tel" id="d" required="" type="tel" placeholder="12345678" minlength="8"><br>
<label for="e">Gateadresse:</label><input name="gate" id="e" required="" type="text" placeholder="Liljevegen 3"><br>
<label for="f">Postnummer:</label><input name="postnummer" id="f" required="" type="number" maxlength="4" placeholder="8400" minlength="4">
</fieldset>
<fieldset>
<legend>Hvordan fikk du høre om magasinet?</legend>
<label><input name="innflytelse[]" type="checkbox" value="På dansegalla/dansefest">På dansegalla/dansefest</label><br>
<label><input name="innflytelse[]" type="checkbox" value="Annonse på nett">Annonse på nett</label><br>
<label><input name="innflytelse[]" type="checkbox" value="Via Facebook">Via Facebook</label><br>
<label><input name="innflytelse[]" type="checkbox" value="Venner/bekjente">Venner/bekjente</label><br>
<label><input name="innflytelse[]" type="checkbox" value="På nettsidene våre">På nettsidene våre</label><br>
<label><input name="innflytelse[]" type="checkbox" value="Jeg er tidligere abonnent">Jeg er tidligere abonnent</label><br>
<label><input name="innflytelse[]" type="checkbox" value="Annet">Annet</label>
</fieldset>
<fieldset>
<legend>Jeg er...</legend>
<label><input name="jeger[]"...
JavaScript
document.querySelector("form#abo input").addEventListener("change", function(){
if(document.querySelector("form fieldset:first-child input[value='bestille et abonnement']:checked")) {
document.getElementById("hardukode").removeAttribute("style");
document.getElementById("tskjorte").removeAttribute("style");
if(document.querySelector("#hardukode input[value='ja']:checked")) {
document.querySelectorAll("#hardukode label:last-of-type, #hardukode br, #hardukode > input:last-of-type").removeAttribute("style");
document.getElementById("tskjorte").style.display = "none";
}
else {
document.querySelectorAll("#hardukode label:last-of-type, #hardukode br, #hardukode > input:last-of-type").style.display = "none";
document.getElementById("tskjorte").removeAttribute("style");
}
if(document.querySelector("#tskjorte input[value='ja']:checked")) {
document.querySelectorAll("#tskjorte #i, #tskjorte #j, #tskjorte label[for='i'], #tskjorte label[for='j'], #tskjorte br").removeAttribute("style");
}
else {
document.querySelectorAll("#tskjorte #i, #tskjorte #j, #tskjorte label[for='i'], #tskjorte label[for='j'], #tskjorte br").style.display = "none";
}
}
else {
document.getElementById("tskjorte").style.display = "none";
document.getElementById("hardukode").style.display = "none";
}
if(document.querySelector("#likerdudanse input[value='ja']:checked") || document.querySelector("form input[value='Tilknyttet en danseklubb']:checked")) {
document.getElementById("jeglikerdanse").removeAttribute("style");
if(document.querySelector("form input[value='Tilknyttet en danseklubb']:checked")) {
document.getElementById("likerdudanse").style.display = "none";
}
else {
document.getElementById("likerdudanse").removeAttribute("style");
}
}
else {
document.getElementById("jeglikerdanse").style.display = "none";
...