JSFiddle - React, Tailwind, and code Playground

by Riccal

HTML

<select id="bolge_input"><option value="1">1</option><option value="2">2</option></select>
<select id="bolgetwo_input"><option value="1">1</option><option value="2">2</option></select>

<input type="checkbox" name="deneme[]" value="3" checked /> asdasd
<input type="checkbox" name="deneme[]" value="7" /> dsfsdf

    
<input type="text" name="sonprice" class="lastprice" id="lastprice" value="">    
    
    <p id="price_output"></p>

JavaScript

$(function() {
    var tier_bolge = [
        { id: 11, Price:0 },
        { id: 12, Price:15 },
        { id: 21, Price:10 },
        { id: 22, Price:5 }
    ];
    $('#bolge_input').on("change input keyup", function() {
        var id_two = $('#bolgetwo_input').val()
        var id = this.value+''+id_two;
        var price;
        for (var i = 0; i < tier_bolge.length && id >= tier_bolge[i].id; i++) {
            price = tier_bolge[i].Price;
        }
        $('#price_output').text(price);
        $('#lastprice').val(price);
    });
    
    $('#bolgetwo_input').on("change input keyup", function() {
        var id_one = $('#bolge_input').val()
        var id = id_one+''+this.value;
        var price;
        for (var i = 0; i < tier_bolge.length && id >= tier_bolge[i].id; i++) {
            price = tier_bolge[i].Price;
        }
        $('#price_output').text(price);
        $('#lastprice').val(price);
    });

         
    
    
$.fiyatHesapla = function(){
    var fiyat = 0;
    $('input:checked').each(function(){
        fiyat += parseFloat($(this).val());
    });
    $('#lastprice').val(fiyat);  
}

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


    
   
});