JSFiddle - React, Tailwind, and code Playground

by Nikita87200

HTML

<form onchange="calc()">
				    <div class="123"><input type="radio" name="type_design" id="type_design" value="350" checked /><label for="type_design" id="label_type_design">100шт 350 руб</label></div>

				    <input type="radio" name="type_design" id="type_design_2" value="600"/>200шт 600 руб<br />

				    <input type="radio" name="type_design" id="type_design_3" value="850"/>300шт 850 руб<br />

                    <input type="radio" name="type_design" id="type_design_4" value="1040"/>300шт 1040 руб<br />

                    <input type="radio" name="type_design" id="type_design_5" value="1200"/>300шт 1200 руб
				</form>

            
				<form onchange="calc()"/>
         	<label class="ninn"><input type="checkbox" style="position: relative; margin-top: 15px;" checked/>Ламинация</label>
          
          
              
             <div id="radiobox">
        		<label>          
                <input type="radio" id="lamin" name="lamin" value="0" onchange="calc()" checked><label for="lamin" id="label_lamin" /> Глянцевая &mdash; 162 руб.</label>
                </label><br/>  
                <label>           
             	<input type="radio" id="matov" name="lamin" value="0" onchange="calc()"><label for="matov" id="label_matov"> Матовая &mdash; 216 руб.</label>
                </label>
                <input type="hidden" id="koef" value="10" onchange="calc()"> 
             </div>
             
              
	   

                                   
                    
                    
               <span class="option-price-final" id="p1o3_price"><input type="hidden" value="3500" id="result" name="result"> <p>Итого:</p><div id="itogo"><label for="result" id="label_result">512</label> руб.</div></span>

CSS

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

.off {
	color: gray;
}

JavaScript

function calc() {
	var type_design = $("input[name=type_design]:checked").val();
	var delivery = $("input[name=delivery]:checked").val();
	var resultt = $('#resultt').val();
	var mosgorstat = $('#mosgorstat:checked').val();
	var ninn = $('#ninn:checked').val();
	var lamin = $("input[id=lamin]:checked").val();
	var matov = $("input[id=matov]:checked").val();
	
	
	if (type_design == 350) {
		
		$('#label_mosgorstat').text(' Скругление углов — ' + 60 + ' руб. ');
		$('#label_lamin').text(' Глянцевая — ' + 162 + ' руб. ')
		$('#label_matov').text(' Матовая — ' + 216 + ' руб. ')
		var sum = 0 + parseInt(type_design) ;
		
		if (mosgorstat) sum += parseInt(mosgorstat) + 60;
		if (delivery) sum += parseInt(delivery) + 0;
		if (lamin) sum +=  + 162;	
		if (matov) sum +=  + 216;	
		sum;
	}
	
	
	if (type_design == 600) {
		
		$('#label_mosgorstat').text(' Скругление углов — ' + 90 + ' руб. ');
		$('#label_lamin').text(' Глянцевая — ' + 324 + ' руб. ')
		$('#label_matov').text(' Матовая — ' + 432 + ' руб. ')
	var sum = 0 + parseInt(type_design) ;
		if (mosgorstat) sum += parseInt(mosgorstat) + 90;
		if (delivery) sum += parseInt(delivery) + 0;
		if (lamin) sum +=  + 324;	
		if (matov) sum +=  + 432;
	
		sum;
	}
	
	
	if (type_design == 850) {
		
		$('#label_mosgorstat').text(' Скругление углов — ' + 120 + ' руб. ');
		$('#label_lamin').text(' Глянцевая — ' + 486 + ' руб. ')
		$('#label_matov').text(' Матовая — ' + 648 + ' руб. ')
	var sum = 0 + parseInt(type_design) ;
		if (mosgorstat) sum += parseInt(mosgorstat) + 120;
		if (delivery) sum += parseInt(delivery) + 0;
		if (lamin) sum +=  + 486;	
		if (matov) sum +=  + 648;	
	
		sum;
	}
	
	
	if (type_design == 1040) {
		
		$('#label_mosgorstat').text(' Скругление углов — ' + 150 + ' руб. ');
		$('#label_lamin').text(' Глянцевая — ' + 648 + ' руб. ')
		$('#label_matov').text(' Матовая — ' + 864 + ' руб. ')
	var sum = 0 + parseInt(type_design) ;
		
		if (mosgorstat) sum += parseInt(mosgorstat) + 150;
		if (delivery) sum +=...