handleiding_nieuw:testprofiel [Sumsonite]

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
<html>
<style>
  .klimaatformulier {
    background: #f6f6f6;
    border: 1px solid #ccc;
    padding: 1em;
    width: 400px;
    border-radius: 8px;
    font-family: sans-serif;
    margin-bottom: 1em;
  }
  .klimaatformulier label {
    display: block;
    margin: 0.5em 0;
  }
  .klimaatformulier .resultaat {
    margin-top: 1em;
    font-weight: bold;
    font-size: 1.2em;
  }
</style>

<div class="klimaatformulier">
  <p>Basisprijs profiel: € <span id="basisprijs">1780</span> per strekkende meter</p>

  <form id="klimaat-form">
    <label><input type="checkbox" value="126"> Wadi (+ €126)</label>
    <label><input type="checkbox" value="-5"> Open goten (- €5)</label>
    <label><input type="checkbox" value="174"> Waterpasserend (+ €174)</label>
    <label><input type="checkbox" value="72"> Infiltratiekratten (+ €72)</label>
    <label><input type="checkbox" value="438"> Waterberging onder straatprofiel (+ €438)</label>
    <label><input type="checkbox" value="28"> Infiltratie riool (+ €28)</label>
    <label><input type="checkbox" value="14"> DIT riool (+ €14)</label>
  </form>

  <div class="resultaat">
    Totale kostprijs: € <span id="totaalprijs">1780</span> per m¹
  </div>
</div>

<script>
  (() => {
    const basisprijs = 1780;
    const checkboxes = document.querySelectorAll('#klimaat-form input[type="checkbox"]');
    const totaalveld = document.getElementById('totaalprijs');

    function updatePrijs() {
      let totaal = basisprijs;
      checkboxes.forEach(cb => {
        if (cb.checked) totaal += parseFloat(cb.value);
      });
      totaalveld.textContent = totaal.toFixed(2);
    }

    checkboxes.forEach(cb => cb.addEventListener('change', updatePrijs));
  })();
</script>
</html>