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-" checked>
  <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+">
  <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="extra-options-wrapper normal">
  <div class="extra-options">
    <input id="rolluik-elektrisch" class="checkbox rolluik-elektrisch" type="checkbox" name="rolluikelektrisch" data-percentage="0.17">
    <label for="rolluik-elektrisch">Rolluik Elektrisch (+ 17% van totaalbedrag)</label>
  </div>
  <div class="extra-options">
    <input id="buitenzijde-kleur" class="checkbox buitenzijde-kozijn" type="checkbox" name="rolluikelektrisch" data-percentage="0.5">
    <label for="buitenzijde-kleur">Buitenzijde in kleur behalve kozijn (+ 5% van totaalbedrag)</label>
  </div>
  <div class="extra-options">
    <input id="buitenzijde-keralit" class="checkbox buitenzijde-keralit" type="checkbox" name="rolluikelektrisch" data-percentage="0.10">
    <label for="buitenzijde-keralit">Buitenzijde met Keralit (kunststof rabatdelen) (+ 10% van totaalbedrag)</label>
  </div>
</div>
<!-- EINDE: Extra keuze opties -->

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

CSS

.hidden {
  display: none;
}

JavaScript

var specificWidthValue = $('#formDakkapelSpecifiek input').val();

var checkForChecked = $('.initial-options:checked').map(function() {
        return $(this).attr('initial-price-value');
}).get();

function calculate(event) {

	var totalprice = parseFloat(checkForChecked);
  var $checkbox = $('.checkbox');
  var percentIsChecked = $checkbox.is(':checked');
  var optionPercentage = $checkbox.attr('data-percentage');

	// loop trough each extra options checkboxes 
  $('.checkbox:checked').each(function() {

		// and find the checked once
    if (percentIsChecked) {

			// multiply the initial-price-value with the custom options percentage
      totalprice += totalprice * optionPercentage;
      
    }
    
  });
  
  var totalAll = totalprice + parseFloat(specificWidthValue);
  
  $('#totalprice').html('€ ' + totalAll.toFixed(0));
  
}

function resetCheckBoxes() {

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

 	// loop trough each checkbox element
  $('.checkbox:checked').each(function() {
  
  	// 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 preventText(event) {
  
  $input = $(this);
  
  $input.val($input.val().replace(/[^\d].+/, ''));
  
  if ((event.which < 48 || event.which > 57)) {
    event.preventDefault();
  }
  
}

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 = radioButton.val() === '200+' && radioButton.prop('checked');
  
  // toggle if second radio button is choosen
  $('#formDakkapelSpecifiek').toggleClass('hidden', !isSpecifiekAfmeting);
  
  // if second radio button is choosen disable all percentage...