JSFiddle - React, Tailwind, and code Playground

by Yasin Kaya

HTML

<input type="text" id="default_bolge" value="1" style="display:none;"> marmaris
<br><br>
<input type='radio' name='package[]' id="week1" value='1' style="display:none;"/>
<input type='radio' name='package[]' id="week2" value='2' style="display:none;" />
<input type='radio' name='package[]' id="week3" value='3' style="display:none;" /> 

<a href="#" id="1" class="check">week 1</a>   
<a href="#" id="2" class="check">week 2</a>   
<a href="#" id="3" class="check">week 3</a>   


<br><br>
<select id="bolge">
      <option value="1">Marmaris</option>
      <option value="2">Antalya</option>
</select>

<select id="bolge2">
      <option value="1">Marmaris</option>
      <option value="2">Antalya</option>
</select>

<br><br>
<input type="checkbox" name="extra[]" value="3" /> Kaptan
<input type="checkbox" name="extra[]" value="7" /> Havlu
    
<br><br>    
<input type="text" name="lastprice" id="lastprice" value="">

JavaScript

$(function() {
  
    
    // Dynamically 'Check' Radio buttons
    $('.check').on('click', function () {
        var $this = $(this);
        var id = $this.attr('id');

        $('#week'+id).each(function () {
            if ($(this).is(':checked')) {
                $(this).prop('checked', true);
                 $.fiyatHesapla();  
            } else {
                $(this).prop('checked', true);
                 $.fiyatHesapla();  
            }
        });
     });

    
    $.fiyatHesapla = function(){
         var tier_bolge = [
                { id: 11, Price:0 },
                { id: 12, Price:10 },
                { id: 21, Price:10 },
                { id: 22, Price:20 }
         ];
           
         var fiyat2 = 0;
         var fiyat3;        
         var default_bolge = $('#default_bolge').val()+''+$('#default_bolge').val();
         var bolge_one = $('#bolge').val()        
         var bolge_two = $('#bolge2').val()
         var bolge = bolge_one+''+bolge_two;    
        
         $('input:checked').each(function(){
            fiyat2 += parseFloat($(this).val());
         });

          if(default_bolge == bolge){       
                   fiyat3 = 0;
          }else{
                for (var i = 0; i < tier_bolge.length && bolge >= tier_bolge[i].id; i++) {
                    fiyat3 = tier_bolge[i].Price;
                 }
          }    
        
         var fiyat = fiyat2 + fiyat3;
        
         $('#lastprice').val(fiyat);  
     }

     $.fiyatHesapla();
    
     $("input").click(function(event) {
        $.fiyatHesapla();
     }); 

     $('#bolge').on("change input keyup", function() {
      $.fiyatHesapla();  
     });   
    
     $('#bolge2').on("change input keyup", function() {
      $.fiyatHesapla();  
     });      
    
});