kirito0709,
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<style type="text/css">
.floor-chechbox{margin-bottom: 15px;}
label.floor-radio{margin-bottom: 0px;}
label.floor-radio input{display:inline-block;}
label.floor-radio input+div.floor-checkbox{
height: 20px;
text-align:left;
display:inline-block;
vertical-align: text-bottom;
padding-left:5px;
}
label.floor-radio input~div.checked-item-text > img{height: 20px;}
label.floor-radio input:checked~div.checked-item-text{color: #cbb892; font-weight:bold;}
label.floor-radio input:checked~div.checked-item-text:before{
content: '✔ ';
color:#b1945b;
}
label.floor-radio input:checked~div.floor-checkbox{background:#c4af84;}
label.floor-radio input+div.floor-checkbox {
width: 15px;
height: 15px;
border: 1px solid #b1945b;
box-sizing: border-box;
border-radius:50%;
}
label.floor-radio input {display: none;}
.floor-checkbox, .checked-item-text, .checked-item-text span, .checked-item-text img {
vertical-align: middle;
display:inline-block;
}
/* цвет тента */
label.roof-color {
display: inline-block;
vertical-align: top;
}
label.roof-color input {
display: none;
}
label.tent-color input#t-color-1+div {
background: #82a5bb;
}
label.roof-color input+div {
width: 24px;
height: 24px;
text-align: center;
opacity: 0.8;
border: 1px solid #000;
box-sizing: border-box;
}
label.roof-color input:checked+div {
opacity: 1;
}
label.roof-color input+div i {
display: none;
line-height: 24px;
font-size:18px;
}
label.roof-color input:checked+div i {
display: block;
top: -2px;
position: relative;
}
label.roof-color input+div:hover::before {
content: attr(data-title);
position: relative;
top: -40px;
left: -100%;
padding: 5px 10px;
border: 1px solid #333;
background: rgba(255,255,230,1);
}
label.roof-color input+div:hover::after {
content: '';
display: block;
position: relative;
height: 0;
width: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid rgba(0,0,0,.7);
opacity: 1;
top: -33px;
z-index:1;
}
label.roof-color input:checked+div:hover::before {
top: -40px;
}
label.roof-color input:checked+div:hover::after {
top: -57px;
}
label.roof-color input:checked+div:hover i {
top: -18px;
position: relative;
}
label.constract-color input+div:hover::before {
content: attr(data-title);
position: relative;
top: -40px;
left: -100%;
padding: 5px 10px;
border: 1px solid #333;
background: rgba(255,255,230,1);
}
label.constract-color input+div:hover::after {
content: '';
display: block;
position: relative;
height: 0;
width: 0;
border-left: 8px solid transparent;
border-right: 8px solid transparent;
border-top: 8px solid rgba(0,0,0,.7);
opacity: 1;
top: -33px;
z-index:1;
}
label.constract-color input:checked+div:hover::before {
top: -40px;
}
label.constract-color input:checked+div:hover::after {
top: -57px;
}
label.constract-color input:checked+div:hover i {
top: -18px;
position: relative;
}
label.roof-color input#t-color-1+div {
background: #82a5bb;
}
label.roof-color input#t-color-2+div {
background: #14af39;
}
label.roof-color input#t-color-3+div {
background: #0138af;
}
label.roof-color input#t-color-4+div {
background: #babfa8;
}
label.roof-color input#t-color-5+div {
background: #ffffff;
}
label.constract-color {
display: inline-block;
vertical-align: top;
}
label.constract-color input {
display: none;
}
label.constract-color input#c-color-1+div {
background: #c0c0c0;
}
label.constract-color input#c-color-2+div {
background: #ffffff;
}
label.constract-color input#c-color-3+div {
background: #000000;
}
label.constract-color input+div {
width: 24px;
height: 24px;
text-align: center;
opacity: 0.9;
border: 1px solid #000;
box-sizing: border-box;
}
label.constract-color input:checked+div {
opacity: 1;
}
label.constract-color input+div i {
display: none;
line-height: 24px;
font-size:18px;
}
label.constract-color input:checked+div i {
display: block;
top: -2px;
position: relative;
}
label.constract-color input#c-color-3:checked+div i, label.tent-color input#t-color-3:checked+div i {
color: #fff;
}
.text-color-for-roof,
.text-color-for-constract {
padding-bottom:5px;
}
.block-roof-color {
border-right:1px solid #000;
}
/* //строки текста и цвета */
</style>
<title> by kirito0709</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
$(function() {
var b = [0, 0, 0],
d = [15, 3, 1];
$("#form1, #form2, #form3").each(function(e, c) {
var f = $("input", c);
$(c).on("click", "input", function(a) {
a = f.index(this);
b[e] = a;
a = b.reduce(function(a, b, c) {
return a + b * d[c]
}, 0);
$("#result").html(++a + ' картинка')
})
})
});
</script>
</head>
<body>
<div id="form1" class="floor-chechbox row">
<div class="col-md-12">
<label class="floor-radio">
<input id="fr" name="floorprice" value="without_floor" type="radio" checked />
<div class="floor-checkbox"></div>
<div class="checked-item-text">коробка без пола</div>
</label>
</div>
<div class="col-md-12">
<label class="floor-radio">
<input id="zr" name="floorprice" value="floor_batten" type="radio"/>
<div class="floor-checkbox"></div>
<div class="checked-item-text">коробка с полом из половой доски</div>
</label>
</div>
<div class="col-md-12">
<label class="floor-radio">
<input id="sr" name="floorprice" value="floor_dsp" type="radio"/>
<div class="floor-checkbox"></div>
<div class="checked-item-text">коробка с полом из фанеры </div>
</label>
</div>
<div class="col-md-12">
<label class="floor-radio">
<input id="tr" name="floorprice" value="floor_dpk" type="radio"/>
<div class="floor-checkbox"></div>
<div class="checked-item-text">
<span>коробка с полом из ДПК</span>
</div>
</label>
</div>
</div>
<div class="check-color">
<div class="row">
<div class="col-xs-6 block-roof-color">
<div class="text-color-for-roof">
<b>Цвет крыши:</b>
</div>
<div id="form2" class="color-for-roof">
<label class="roof-color">
<input id="t-color-5" name="roofcolor" value="roof_white" type="radio" checked />
<div data-title="Белый"><i>✔</i></div>
</label>
<label class="roof-color">
<input id="t-color-1" name="roofcolor" value="roof_grey" type="radio" />
<div data-title="Серый"><i>✔</i></div>
</label>
<label class="roof-color">
<input id="t-color-2" name="roofcolor" value="roof_green" type="radio" />
<div data-title="Зеленый"><i>✔</i></div>
</label>
<label class="roof-color">
<input id="t-color-3" name="roofcolor" value="roof_blue" type="radio" />
<div data-title="Синий"><i>✔</i></div>
</label>
<label class="roof-color">
<input id="t-color-4" name="roofcolor" value="roof_beige" type="radio" />
<div data-title="Бежевый"><i>✔</i></div>
</label>
</div>
</div>
<div class="col-xs-6">
<div class="text-color-for-constract">
<b>Цвет стенок:</b>
</div>
<div id="form3" class="color-for-constract">
<label class="constract-color">
<input id="c-color-1" name="constractcolor" value="constract_silver" type="radio" checked />
<div data-title="Серебрянный"><i>✔</i></div>
</label>
<label class="constract-color">
<input id="c-color-2" name="constractcolor" value="constract_white" type="radio" />
<div data-title="Белый"><i>✔</i></div>
</label>
<label class="constract-color">
<input id="c-color-3" name="constractcolor" value="constract_black" type="radio" />
<div data-title="Черный"><i>✔</i></div>
</label>
</div>
</div>
</div>
</div>
<p><span id="result1"></span> <span id="result2"></span><span id="result3"></span></p>
<div style="border:1px solid #000;height:100px; width:100px;" id="result">1 картинка</div>
</body>
</html>