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</input>
</label>
<br/>
<label>
<input name="jegvil" required="" type="radio" value="kjøpe kun siste nummer">kjøpe kun siste nummer</input>
</label>
</fieldset>
<fieldset>
<legend>Informasjon om deg</legend>
<label for="a">Fornavn:</label>
<input name="fornavn" id="a" required="" type="text" placeholder="Ola"></input>
<br/>
<label for="b">Etternavn:</label>
<input name="etternavn" id="b" required="" type="text" placeholder="Nordmann"></input>
<br/>
<label for="c">E-postadresse:</label>
<input name="mail" id="c" required="" type="email" placeholder="[email protected]"></input>
<br/>
<label for="d">Telefonnummer:</label>
<input name="tel" id="d" required="" type="tel" placeholder="12345678" minlength="8"></input>
<br/>
<label for="e">Gateadresse:</label>
<input name="gate" id="e" required="" type="text" placeholder="Liljevegen 3"></input>
<br/>
<label for="f">Postnummer:</label>
<input name="postnummer" id="f" required="" type="number" maxlength="4" placeholder="8400" minlength="4"></input>
</fieldset>
<fieldset>
<legend>Hvordan fikk du høre om magasinet?</legend>
<label>
<input name="innflytelse[]" type="checkbox" value="På dansegalla/dansefest">På dansegalla/dansefest</input>
</label>
<br/>
<label>
<input name="innflytelse[]" type="checkbox" value="Annonse på nett">Annonse på nett</input>
</label>
<br/>
<label>
<input name="innflytelse[]" type="checkbox" value="Via Facebook">Via Facebook</input>
</label>
<br/>
<label>
...
JavaScript
document.getElementById('abo').addEventListener("change", function () {
console.log('changed');
if (document.querySelector("form fieldset:first-child input[value='bestille et abonnement']").checked) {
console.log('first');
document.getElementById("hardukode").removeAttribute("style");
document.getElementById("tskjorte").removeAttribute("style");
if (document.querySelector("#hardukode input[value='ja']").checked) {
var el = document.querySelectorAll("#hardukode label:last-of-type, #hardukode br, #hardukode > input:last-of-type");
for (i = 0; i < el.length; i++) {
el[i].removeAttribute("style");
}
document.getElementById("tskjorte").style.display = "none";
}
else {
var el = document.querySelectorAll("#hardukode label:last-of-type, #hardukode br, #hardukode > input:last-of-type");
for (i = 0; i < el.length; i++) {
el[i].style.display = "none";
}
document.getElementById("tskjorte").removeAttribute("style");
}
if (document.querySelector("#tskjorte input[value='ja']").checked) {
var el = document.querySelectorAll("#tskjorte #i, #tskjorte #j, #tskjorte label[for='i'], #tskjorte label[for='j'], #tskjorte br")
for (i = 0; i < el.length; i++) {
el[i].removeAttribute("style");
}
}
else {
var el = document.querySelectorAll("#tskjorte #i, #tskjorte #j, #tskjorte label[for='i'], #tskjorte label[for='j'], #tskjorte br");
for (i = 0; i < el.length; i++) {
el[i].style.display = "none";
}
}
}
else {
console.log('!first');
document.getElementById("tskjorte").style.display = "none";
document.getElementById("hardukode").style.display = "none";
}
if (document.querySelector("#likerdudanse input[value='ja']").checked ||...