JSFiddle - React, Tailwind, and code Playground

HTML

<form action="" method="post">
<div id="calc"><span class="calc-title">Выберите вид кладки:</span>
<div class="kirp-img"><input id="pkirp" type="radio" name="units" value="0" checked="checked" /><label for="pkirp"><img src="http://s14.postimg.org/m88hs8sod/05kirp.png" border="0" title="0.5 кирпича (толщина стены - 12 см)" style="border: 0;" /></label> <input id="kirp" type="radio" name="units" value="1" /> <label for="kirp"><img src="http://s14.postimg.org/7u540i6ul/1kirp.png" border="0" title="1 кирпич (толщина стены - 25 см)" style="border: 0;" /></label> <input id="poltkirp" type="radio" name="units" value="2" /> <label for="poltkirp"><img src="http://s14.postimg.org/g271lhyr1/15kirp.png" border="0" title="1.5 кирпича (толщина стены - 38 см)" style="border: 0;" /></label> <input id="dkirp" type="radio" name="units" value="3" /> <label for="dkirp"><img src="http://s14.postimg.org/eymx9je3x/2kirp.png" border="0" title="2 кирпича (толщина стены - 51 см)" style="border: 0;" /></label> <input id="dspkirp" type="radio" name="units" value="4" /> <label for="dspkirp"><img src="http://s14.postimg.org/7djwe2j3h/25kirp.png" border="0" title="2.5 кирпича (толщина стены - 64 см)" style="border: 0;" /></label></div>
<span class="calc-title">Выберите размер кирпича:</span>
<div class="bsize-img"><input id="bsize1" type="radio" name="bsize" value="0" checked="checked" /> <label for="bsize1"><img src="http://s24.postimg.org/9o5n40wwh/size1.png" border="0" title="Одинарный 250x120x65" style="border: 0;" /></label> <input id="bsize15" type="radio" name="bsize" value="1" /> <label for="bsize15"><img src="http://s14.postimg.org/n7ysny7u9/size15.png" border="0" title="Полуторный 250x120x88" style="border: 0;" /></label> <input id="bsize2" type="radio" name="bsize" value="2" /> <label for="bsize2"><img src="http://s14.postimg.org/e1gi0o2lt/size2.png" border="0" title="Двойной 250x120x138" style="border: 0;" /></label></div>
<div class="size"><span class="s-title">Введите площадь...

CSS

input[type="radio"]:checked+label img {
    border: black solid 2px;
}
.kirp-img {
    margin:20px 0;
    height:100px;
    text-align:center;
}


.kirp-img input[type="radio"], .bsize-img input[type="radio"] {
  display:none;
}

.kirp-img label, .bsize-img label {
    display:inline-block;
    cursor:pointer;
    vertical-align:middle;
    padding:5px;
    opacity:0.6;
   
}
.kirp-img input[type="radio"]:checked + label, .bsize-img input[type="radio"]:checked + label {
    opacity:1;
}
span.s-title, span.res, span.calc-title {
    color:#000;
   
}

JavaScript

function calculate(obj) {
var eitems = [  [51, 39, 26], [102, 78, 52],  [154, 118, 79], [204, 157, 104],  [253, 198, 132],  [304, 234, 156]];
if (obj.form == null) {
alert("Ошибка калькулятора.");
return;
}
for(i=0;i<obj.form.units.length;i++) {
if (obj.form.units[i].checked) {
var units = parseInt(obj.form.units[i].value);
break;
}
}
for(k=0;k<obj.form.bsize.length;k++) {
if (obj.form.bsize[k].checked) {
var bsize = parseInt(obj.form.bsize[k].value);
break;
}
}
//alert("Units: " + units);
/*var bsize_tmp = parseInt(obj.form.bricksize.value);
var bsize = 0;
switch(bsize_tmp) {
case 15:
bsize = 1;break;
case 20:
bsize = 2;break;
} */
//alert("Bsize: " + bsize);
if (isNaN(obj.form.quantity.value)) {
alert("Площадь указывается только в цифрах");
return;
}
var quant = parseInt(obj.form.quantity.value);
var edin = eitems[units][bsize];
endcost.innerHTML=Math.round(edin * quant);
}