JSFiddle - React, Tailwind, and code Playground

by justamir

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div>
  <input id="200-of-minder" class="initial-options" type="radio" name="radio" initial-price-value="2670" value="200-" data-sum="2670">
  <label for="200-of-minder">200cm of minder (€ 2670)</label>
</div>
<div>
  <input id="200-of-meer" class="initial-options" type="radio" name="radio" initial-price-value="0" value="200+" data-sum="">
  <label for="200-of-meer">200cm of +</label>
</div>
<div id="formDakkapelSpecifiek" class="hidden">
  <label>
    <span>Vul de gewenste breedte in</span>
    <input placeholder="bijv. 300 cm" type="text" tabindex="4" minlength="201" value="0">
    <span id="errmsg"></span>
  </label>
</div>

<!-- Extra keuze opties -->
<p><strong>Extra opties:</strong></p>
<div class="item">
  <input id="rolluik-elektrisch" type="checkbox" name="rolluikelektrisch" data-percentage="17">
  <label for="rolluik-elektrisch">Rolluik Elektrisch (+ 17% van totaalbedrag)</label>
</div>
<div class="item">
  <input id="buitenzijde-kleur" type="checkbox" name="rolluikelektrisch" data-percentage="5">
  <label for="buitenzijde-kleur">Buitenzijde in kleur behalve kozijn (+ 5% van totaalbedrag)</label>
</div>
<div class="item">
  <input id="buitenzijde-keralit" type="checkbox" name="rolluikelektrisch" data-percentage="10">
  <label for="buitenzijde-keralit">Buitenzijde met Keralit (kunststof rabatdelen) (+ 10% van totaalbedrag)</label>
</div>
<!-- EINDE: Extra keuze opties -->

<!-- Totaal bedrag -->
<hr>
Totaal indicatieprijs:<div id="totalprice"></div> 
<!-- EINDE: Totaal bedrag -->

CSS

.hidden {
  display: none;
}

JavaScript

// cache the checkbox elements
var $checkBoxes = $('.item').find('input[type="checkbox"]');

/**
* Function for calculating the total price
*/ 
function calculate() {

	// store the data-sum values of the two radio buttons
	var getSums = $('input[type="radio"]:checked').attr('data-sum');
  
  // sum value
  var sum = parseFloat(getSums);

	// iterate trough each checbox
  $checkBoxes.each(function() {
  
  	// get the percentage of each option
    var $dataPercentage = $(this).attr('data-percentage');
    
    // if element is checked
    if (this.checked) {
    	
      getSums.val(sum);
      
    	// calculate the sum, based on the data-percentage value of that element
    	sum += ((sum * parseFloat($dataPercentage)) / 100);
      
    }
    
  });
  
  // finaly insert the total price in the html
  $("#totalprice").html('€ ' + sum.toFixed(0));
  
}

/**
* Function for resetting/unchecking any previous checked input elements
*/ 
function resetCheckBoxes() {

	// clear the custom input field 
  $('#formDakkapelSpecifiek').find('input').val('');

 	// loop trough each checkbox element
  $('input[type="checkbox"]:checked').each(function() {
  
  	var $checkBox = $(this);
    
  	// if there are any checked checkboxes
    if ($checkBox.is(':checked')) {
    
    	// reset any checked checkboxes
      $(this).prop('checked', false);
      
      // return the minimum price
      $('#totalprice').html('€ ' + 2670);
      
    }
    
  });

}

/**
* Function preventing entering text
*/ 
function preventText(event) {
  
  $input = $(this);
  
  $input.val($input.val().replace(/[^\d].+/, ''));
  
  if ((event.which < 48 || event.which > 57)) {
    event.preventDefault();
  }
  
}

/**
* Toggle function for showing/hiding the custom input field
*/ 
function showHideCustomInput(event) {
  
  // identifies the element on which the event occurred
  var radioButton = $(event.currentTarget);
  
  // identifies if the second radio button is choosen
  var isSpecifiekAfmeting =...