JSFiddle - React, Tailwind, and code Playground

by Nikita87200

HTML

<select name="mesto" id="type_design" onclick="calc()" >
					<option value="350" selected>100шт 350 руб</option>
					<option value="600">200шт 600 руб</option>
					<option value="850">300шт 850 руб</option>
					<option value="1040">400шт 1040 руб</option>
					<option value="1200">500шт 1200 руб</option>
				</select>
                
           	
		
				<form action="" style="font-size: 18px;"/>
         	<input type="checkbox" id="ninn" name="ninn" value="0" onchange="calc()" style="position: relative; margin-top: 15px;"><label for="ninn" id="label_ninn">Ламинация</label>
          
          
              
             <div id="radiobox">
        		  <div id="radiobox-curtain"></div>	  
           
<input type="radio" id="lamin" name="lamin" value="0" onchange="calc()" ><label for="lamin" id="label_lamin"> Глянцевая &mdash; 110 руб.</label>
                <br/>   
<input type="radio" id="matov" name="lamin" value="0" onchange="calc()"><label for="lamin" id="label_matov"> Матовая &mdash; 50 руб.</label>
               
             </div>
             
         </form>
         
           
                 <form action="" style="font-size: 18px;"><input type="checkbox" id="mosgorstat" name="mosgorstat" value="0" onchange="calc()"><label for="mosgorstat" id="label_mosgorstat"> Скругление углов &mdash; 60 руб.</label>
           </form>
           
	      <div>        
                    </div>             
                                    
                    
               <span class="option-price-final" id="p1o3_price"><input type="hidden" value="3500" id="result" name="result"> <p style="font-size: 16px;font-style: normal;float: left;margin-top: 45px;width: 90px;">Итого:</p><div id="itogo"><label for="result" id="label_result">350</label> руб.</div></span>

CSS

#radiobox {
        width: 300px;
        margin: 10px 20px 10px;
        border-radius: 5px;
        display: block;
        position: relative;
        overflow: hidden;
        z-index: 1;
    }

JavaScript

function calc() {
	var type_design = $('#type_design').val();
	var delivery_cur = $('#delivery_cur:checked').val();
	var delivery_sam = $('#delivery_sam:checked').val();
	var resultt = $('#resultt').val();
	var mosgorstat = $('#mosgorstat:checked').val();
	var ninn = $('#ninn:checked').val();
	var lamin = $('#lamin:checked');
	var matov = $('#matov:checked');
	

	
	if (type_design == 350) {
		
		$('#label_mosgorstat').text(' Скругление углов — ' + 60 + ' руб. ');
		$('#label_lamin').text(' Глянцевая — ' + 110 + ' руб. ')
		$('#label_matov').text(' Матовая — ' + 50 + ' руб. ')
	}
	
	
	if (type_design == 600) {
		
		$('#label_mosgorstat').text(' Скругление углов — ' + 90 + ' руб. ');
		$('#label_lamin').text(' Глянцевая — ' + 120 + ' руб. ')
		$('#label_matov').text(' Матовая — ' + 60 + ' руб. ')
	}
	
	
	if (type_design == 850) {
		
		$('#label_mosgorstat').text(' Скругление углов — ' + 120 + ' руб. ');
		$('#label_lamin').text(' Глянцевая — ' + 130 + ' руб. ')
		$('#label_matov').text(' Матовая — ' + 70 + ' руб. ')
	}
	
	
	if (type_design == 1040) {
		
		$('#label_mosgorstat').text(' Скругление углов — ' + 150 + ' руб. ');
		$('#label_lamin').text(' Глянцевая — ' + 140 + ' руб. ')
		$('#label_matov').text(' Матовая — ' + 80 + ' руб. ')
	}
	
	
	if (type_design == 1200) {
		
		$('#label_mosgorstat').text(' Скругление углов — ' + 180 + ' руб. ');
		$('#label_lamin').text(' Глянцевая — ' + 150 + ' руб. ')
		$('#label_matov').text(' Матовая — ' + 90 + ' руб. ')
	}
	
	var sum = 0 + parseInt(type_design) ;
		
		if (mosgorstat) sum += parseInt(mosgorstat) + 100;
		if (delivery_cur) sum += 300;
		if (matov) sum +=  + 60;
		if (lamin) sum +=  + 160;

	sum;
		
	
	
	
	$('#result').val(sum);
	$('#label_result').text(sum);
	
	
	

}